/* The original page's stylesheet, unchanged (billing-review.html). Additions live in app.css. */
  :root {
    --bg: #F7F4ED; --bg-elev: #FFFFFF; --ink: #1A1A1A; --ink-soft: #4A4A4A; --ink-mute: #8A8A8A;
    --rule: #E8E2D4; --rule-strong: #C7BFA8; --accent: #3A3AE8; --accent-soft: #EEEEFD;
    --success: #1F7A4C; --warn: #B45309; --danger: #B1422A;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'DM Sans', sans-serif; color: var(--ink); background: var(--bg);
    font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  }
  .page { max-width: 1080px; margin: 0 auto; padding: 40px 32px 120px; }

  /* Masthead */
  .masthead {
    border-bottom: 1px solid var(--rule-strong); padding-bottom: 20px; margin-bottom: 32px;
    display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end;
  }
  .kicker {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
  }
  h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 34px; letter-spacing: -0.015em; margin: 0; }
  h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
  .meta {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-mute);
    text-align: right; letter-spacing: 0.04em; line-height: 1.6;
  }

  /* Summary */
  .summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-bottom: 36px; padding: 18px 22px;
    background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 3px;
  }
  .summary-cell { padding: 0 4px; }
  .summary-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px;
  }
  .summary-value {
    font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500;
    color: var(--ink); letter-spacing: -0.01em;
  }
  .summary-value.mono { font-family: 'JetBrains Mono', monospace; font-size: 20px; }

  /* Group sections */
  .group { margin-bottom: 36px; }
  .group-standalone { margin-bottom: 16px; }
  .group-head {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px;
    margin-bottom: 14px; padding: 14px 20px; background: var(--bg-elev);
    border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 3px;
  }
  .group-name {
    font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -0.005em;
    color: var(--ink); display: flex; align-items: center; gap: 10px;
  }
  .group-warning-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--warn);
    box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.15);
  }
  .group-meta {
    font-size: 11px; color: var(--ink-mute); font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em; margin-top: 3px; text-transform: uppercase;
  }
  .group-head-right { display: flex; align-items: center; gap: 18px; }
  .group-totals { text-align: right; }
  .group-total-line { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; }
  .group-total-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .group-total-value { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 500; color: var(--ink); }
  .group-total-sub .group-total-value { font-size: 12px; color: var(--ink-soft); }
  .group-total-delta.delta-up { color: var(--success); }
  .group-cards .card { margin-left: 16px; }
  @media (max-width: 720px) {
    .group-head { grid-template-columns: 1fr; }
    .group-head-right { justify-content: space-between; }
    .group-cards .card { margin-left: 0; }
  }

  /* Cards */
  .card {
    background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 3px;
    padding: 22px 24px; margin-bottom: 12px; transition: opacity 0.2s, border-left-color 0.2s;
  }
  .card-head {
    display: grid; grid-template-columns: 1fr auto; gap: 16px;
    padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 18px;
  }
  .client-name {
    font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500;
    letter-spacing: -0.005em; color: var(--ink);
  }
  .client-meta {
    font-size: 11px; color: var(--ink-mute); font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em; margin-top: 2px;
  }
  .card-head-right { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; white-space: nowrap; }
  .confidence {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
    padding: 3px 8px; border-radius: 2px; letter-spacing: 0.08em;
  }
  .rule-path { font-size: 11px; color: var(--ink-soft); font-style: italic; font-family: 'Fraunces', serif; }

  .card-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
  @media (max-width: 720px) { .card-body { grid-template-columns: 1fr; } }

  .suggestion-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px;
  }
  .suggestion-value {
    font-family: 'Fraunces', serif; font-size: 36px; font-weight: 500;
    color: var(--accent); letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px;
  }
  .suggestion-delta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-mute); margin-bottom: 12px; }
  .suggestion-delta.delta-up { color: var(--success); }
  .suggestion-delta.delta-down { color: var(--warn); }
  .reasoning { font-family: 'Fraunces', serif; font-size: 14px; font-style: italic; line-height: 1.55; color: var(--ink-soft); }

  .wip-summary { padding: 12px 14px; background: #FAF6EC; border-radius: 2px; margin-bottom: 14px; }
  .wip-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px;
  }
  .wip-value { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 500; color: var(--ink); }
  .wip-hours { font-size: 11px; color: var(--ink-mute); font-family: 'JetBrains Mono', monospace; }

  .history-title {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
  }
  .history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
  .history-year {
    padding: 8px 6px; text-align: center; border: 1px solid var(--rule);
    border-radius: 2px; background: #FDFBF5;
  }
  .history-year-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-mute); letter-spacing: 0.05em; }
  .history-year-fee { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 2px; }
  .history-year-hours { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-mute); }
  .history-line { font-size: 13px; color: var(--ink-soft); }
  .history-empty { font-style: italic; font-family: 'Fraunces', serif; color: var(--ink-mute); }

  .warnings {
    margin-top: 16px; padding: 12px 16px; background: #FFFBF0;
    border-left: 3px solid var(--warn); border-radius: 0 2px 2px 0;
  }
  .warning { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); padding: 2px 0; }
  .warning-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-top: 8px; }

  .ai-summary {
    margin-top: 16px; padding: 14px 18px; background: var(--accent-soft);
    border-radius: 2px; border-left: 3px solid var(--accent);
  }
  .ai-summary-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
  }
  .ai-summary-body { font-family: 'Fraunces', serif; font-size: 14px; font-style: italic; color: var(--ink); line-height: 1.55; }

  .details { margin-top: 14px; border-top: 1px dashed var(--rule); padding-top: 10px; }
  .details summary {
    cursor: pointer; font-size: 11px; color: var(--accent); font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em; font-weight: 500;
  }
  .details summary:hover { color: var(--ink); }
  .staff { margin-top: 10px; }
  .staff-row {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; padding: 5px 0;
    font-size: 12px; border-bottom: 1px solid #F5F1E8;
  }
  .staff-director { background: #FFFBF0; padding-left: 8px; margin: 0 -8px; padding-right: 8px; }
  .staff-hours, .staff-amount { font-family: 'JetBrains Mono', monospace; text-align: right; }
  .dir-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; padding: 1px 5px;
    background: var(--warn); color: #FFF; border-radius: 2px; margin-left: 6px;
    letter-spacing: 0.05em; font-weight: 600;
  }

  .entries { margin-top: 10px; max-height: 300px; overflow-y: auto; }
  .entry {
    display: grid; grid-template-columns: 80px 140px 1fr 50px 80px; gap: 10px;
    padding: 4px 6px; font-size: 11px; border-bottom: 1px solid #F5F1E8;
  }
  .entry-date    { order: 1; }
  .entry-staff   { order: 2; }
  .entry-note    { order: 3; }
  .entry-hours   { order: 4; text-align: right; }
  .entry-amount  { order: 5; }
  .entry-date, .entry-hours, .entry-amount { font-family: 'JetBrains Mono', monospace; color: var(--ink-mute); }
  .entry-amount { text-align: right; }
  .entry-note { color: var(--ink-soft); }

  .actions { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
  .btn {
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
    border: 1px solid var(--rule-strong); background: var(--bg-elev); color: var(--ink);
    padding: 8px 16px; border-radius: 2px; cursor: pointer; transition: all 0.12s;
  }
  .btn:hover { border-color: var(--ink); }
  .btn-approve { background: var(--ink); color: #FFF; border-color: var(--ink); }
  .btn-approve:hover { background: var(--accent); border-color: var(--accent); }
  .btn-group-approve {
    background: var(--accent); color: #FFF; border-color: var(--accent);
    font-weight: 600; padding: 9px 18px;
  }
  .btn-group-approve:hover { filter: brightness(0.85); }

  .card.decided-approved { border-left: 3px solid var(--success); }
  .card.decided-adjusted { border-left: 3px solid var(--warn); }
  .card.decided-rejected { border-left: 3px solid var(--danger); }
  .card.decided .actions { display: none; }
  .decision-banner {
    display: none;
    margin-top: 12px;
    padding: 8px 12px;
    background: #F5F1E8;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink-soft);
    border-radius: 2px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .card.decided .decision-banner { display: flex; }
  .decision-banner-text { flex: 1; }
  .decision-banner-reopen {
    background: none;
    border: none;
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.12s, color 0.12s;
  }
  .decision-banner-reopen:hover {
    background: var(--ink);
    color: #FFF;
  }

  /* Toasts */
  .toast-stack {
    position: fixed; top: 24px; right: 24px; z-index: 1000;
    display: flex; flex-direction: column; gap: 10px; max-width: 360px; pointer-events: none;
  }
  .toast {
    background: var(--ink); color: #FFF; padding: 12px 16px; border-radius: 3px;
    font-size: 13px; line-height: 1.4; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    pointer-events: auto; animation: slideIn 0.22s cubic-bezier(.2,.7,.3,1);
    display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
    transition: opacity 0.3s, transform 0.3s;
  }
  .toast.fading { opacity: 0; transform: translateX(20px); }
  .toast.toast-approved { border-left: 3px solid var(--success); }
  .toast.toast-adjusted { border-left: 3px solid var(--warn); }
  .toast.toast-rejected { border-left: 3px solid var(--danger); }
  .toast.toast-group { border-left: 3px solid var(--accent); }
  .toast-body { display: flex; flex-direction: column; gap: 2px; }
  .toast-title { font-weight: 500; font-size: 13px; }
  .toast-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.65); }
  .toast-undo {
    background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #FFF;
    padding: 5px 10px; border-radius: 2px; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .toast-undo:hover { background: rgba(255,255,255,0.1); }
  @keyframes slideIn {
    from { transform: translateX(40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  .footer-note {
    text-align: center; font-size: 11px; color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace; margin-top: 40px; letter-spacing: 0.05em;
  }

  /* ─── Job breakdown (per-job pro-rata view + merge mechanic) ─── */
  .job-breakdown {
    margin-top: 14px; padding: 12px 14px;
    background: #FBF8F0; border: 1px solid var(--rule);
    border-radius: 2px;
  }
  .job-breakdown-head {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; flex-wrap: wrap;
  }
  .jb-title { font-weight: 600; }
  .job-breakdown-actions {
    display: flex; align-items: baseline; gap: 12px;
  }
  .jb-merge-btn {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--ink); color: #FFF; border: 1px solid var(--ink);
    padding: 4px 10px; border-radius: 2px; cursor: pointer;
    font-weight: 500;
  }
  .jb-merge-btn:hover { background: var(--accent); border-color: var(--accent); }
  .job-breakdown-note {
    font-size: 10px; color: var(--ink-mute); text-transform: none;
    letter-spacing: 0; font-family: 'DM Sans', sans-serif;
  }
  .job-breakdown-table {
    display: grid;
    grid-template-columns: minmax(140px, 1.6fr) auto 80px 90px 100px;
    gap: 4px 12px; align-items: baseline;
    font-size: 12px;
  }
  .job-breakdown-table.has-checkboxes {
    grid-template-columns: 24px minmax(140px, 1.6fr) auto 80px 90px 100px;
  }
  .job-breakdown-table .col-head {
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-mute); padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
  }
  .job-breakdown-table .jb-jobtype { color: var(--ink); font-weight: 500; }
  .job-breakdown-table .jb-jobtype.is-merged { color: var(--accent); }
  .jb-merge-tag {
    display: inline-block; font-size: 9px; font-family: 'JetBrains Mono', monospace;
    color: var(--ink-mute); background: var(--bg-elev);
    padding: 1px 6px; border-radius: 2px; margin-left: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
    vertical-align: 1px;
  }
  .job-breakdown-table .jb-jobno {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-mute);
  }
  .job-breakdown-table .jb-hours,
  .job-breakdown-table .jb-wip,
  .job-breakdown-table .jb-fee {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    text-align: right;
  }
  .job-breakdown-table .jb-fee { color: var(--ink); font-weight: 500; }
  .job-breakdown-table .jb-fee.is-zero { color: var(--ink-mute); }
  .jb-checkbox-cell {
    display: flex; align-items: center; justify-content: center;
  }
  .jb-checkbox { cursor: pointer; }
  .jb-unmerge {
    background: none; border: 1px solid var(--rule-strong); color: var(--ink-mute);
    cursor: pointer; padding: 0; width: 18px; height: 18px;
    border-radius: 2px; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .jb-unmerge:hover { background: var(--ink); color: #FFF; border-color: var(--ink); }
  .job-breakdown-totals {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(140px, 1.6fr) auto 80px 90px 100px;
    gap: 4px 12px; align-items: baseline;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid var(--rule);
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
  }
  .job-breakdown-totals.has-checkboxes {
    grid-template-columns: 24px minmax(140px, 1.6fr) auto 80px 90px 100px;
  }
  .job-breakdown-totals .label { color: var(--ink-soft); }
  .job-breakdown-totals .total-wip { text-align: right; color: var(--ink-mute); }
  .job-breakdown-totals .total-fee { text-align: right; color: var(--ink); font-weight: 600; }

  /* ─── Bill history (per-card invoice ledger view) ─── */
  .bill-history {
    margin-top: 14px; padding: 12px 14px;
    background: #FAF9F4; border: 1px solid var(--rule);
    border-radius: 2px;
  }
  .bill-history-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; margin-bottom: 10px;
  }
  .bill-history-title {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600;
  }
  .bill-history-tabs {
    display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 2px;
    overflow: hidden;
  }
  .bill-history-tab {
    background: var(--bg-elev); border: 0; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 4px 10px; color: var(--ink-soft);
  }
  .bill-history-tab + .bill-history-tab { border-left: 1px solid var(--rule-strong); }
  .bill-history-tab.active { background: var(--ink); color: #FFF; }
  .bill-history-tab:hover:not(.active) { color: var(--ink); }

  .bill-history-table {
    display: grid;
    grid-template-columns: minmax(160px, max-content) 1fr auto 110px;
    gap: 0;
    font-size: 12px;
  }
  .bh-row {
    display: contents;
  }
  .bh-row > div {
    padding: 6px 8px;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
    cursor: pointer;
  }
  .bh-row:hover > div {
    background: #F2EFE5;
  }
  .bh-row.expanded > div {
    background: #EDE9DC;
  }
  .bh-col-label {
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: visible;
  }
  .bh-col-summary {
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .bh-col-count {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-mute); text-align: right;
    white-space: nowrap;
  }
  .bh-col-total {
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    color: var(--ink); text-align: right;
  }
  .bh-col-total.is-zero { color: var(--ink-mute); font-weight: 500; }

  .bh-detail {
    grid-column: 1 / -1;
    padding: 8px 12px 10px 12px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--rule);
    display: none;
    cursor: default;
  }
  .bh-row.expanded + .bh-detail { display: block; }
  .bh-detail-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    gap: 0 10px; padding: 4px 0;
    font-size: 11px;
    border-bottom: 1px dotted var(--rule);
  }
  .bh-detail-row:last-child { border-bottom: 0; }
  .bh-detail-date {
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink-soft);
  }
  .bh-detail-narration {
    color: var(--ink); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
  }
  .bh-detail-jobtype {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .bh-detail-fee {
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    color: var(--ink); text-align: right;
    white-space: nowrap;
  }
  .bh-detail-fee.is-writeoff { color: var(--ink-mute); }

  .bill-history-totals {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--rule);
    display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
  }
  .bill-history-totals .label { color: var(--ink-soft); }
  .bill-history-totals .value { color: var(--ink); font-weight: 600; }
  .bill-history-empty {
    text-align: center; padding: 16px;
    color: var(--ink-mute); font-size: 12px;
    font-style: italic;
  }

  /* ─── WIP detail block (tabbed: chronological / by staff / by job) ─── */
  .wip-detail {
    margin-top: 14px; border-top: 1px dashed var(--rule); padding-top: 12px;
  }
  .wip-detail-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
  }
  .wip-detail-toggle {
    cursor: pointer; font-size: 11px; color: var(--accent);
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
    font-weight: 500; user-select: none; background: none; border: none; padding: 0;
  }
  .wip-detail-toggle:hover { color: var(--ink); }
  .wip-detail-toggle::before { content: "▸ "; display: inline-block; transition: transform 0.15s; }
  .wip-detail.open .wip-detail-toggle::before { transform: rotate(90deg); }
  .wip-detail-body { display: none; }
  .wip-detail.open .wip-detail-body { display: block; }

  .wip-tabs {
    display: inline-flex;
    border: 1px solid var(--rule); border-radius: 2px;
    background: var(--bg); padding: 2px; gap: 0;
  }
  .wip-tab {
    background: transparent; border: 0; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute);
    padding: 5px 10px; border-radius: 2px; transition: all 0.12s;
  }
  .wip-tab:hover { color: var(--ink); }
  .wip-tab.active {
    background: var(--bg-elev); color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }

  .wip-pane { display: none; }
  .wip-pane.active { display: block; }

  /* Chronological pane reuses .entries / .entry */
  .wip-pane-chrono .entries-tabbed {
    margin-top: 4px; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--rule); border-radius: 2px;
  }

  /* By staff (expandable) */
  .staff-group {
    border-bottom: 1px solid var(--rule); background: var(--bg-elev);
  }
  .staff-group:last-child { border-bottom: 0; }
  .staff-group-head {
    display: grid; grid-template-columns: auto 2fr 1fr 1fr; gap: 12px;
    padding: 8px 12px; cursor: pointer; align-items: center;
    font-size: 12px; user-select: none;
  }
  .staff-group-head:hover { background: #FAF6EC; }
  .staff-group-caret {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--ink-mute); width: 10px; transition: transform 0.15s;
  }
  .staff-group.open .staff-group-caret { transform: rotate(90deg); }
  .staff-group-name { color: var(--ink); }
  .staff-group-name.is-director::after {
    content: "DIR"; font-family: 'JetBrains Mono', monospace; font-size: 8px;
    padding: 1px 5px; background: var(--warn); color: #FFF;
    border-radius: 2px; margin-left: 6px; letter-spacing: 0.05em; font-weight: 600;
  }
  .staff-group-hours, .staff-group-amount {
    font-family: 'JetBrains Mono', monospace; text-align: right; color: var(--ink-soft);
  }
  .staff-group-entries { display: none; padding: 4px 12px 10px 30px; background: #FAF6EC; }
  .staff-group.open .staff-group-entries { display: block; }
  .staff-group-entries .entry {
    grid-template-columns: 80px 1fr 50px 80px;
  }
  .staff-group-entries .entry .entry-staff { display: none; }

  /* By job */
  .job-group {
    border-bottom: 1px solid var(--rule); background: var(--bg-elev);
  }
  .job-group:last-child { border-bottom: 0; }
  .job-group-head {
    display: grid; grid-template-columns: auto 2fr 1fr 1fr; gap: 12px;
    padding: 8px 12px; cursor: pointer; align-items: center;
    font-size: 12px; user-select: none;
  }
  .job-group-head:hover { background: #FAF6EC; }
  .job-group-caret {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--ink-mute); width: 10px; transition: transform 0.15s;
  }
  .job-group.open .job-group-caret { transform: rotate(90deg); }
  .job-group-name { color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .job-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    padding: 2px 6px; border-radius: 2px; letter-spacing: 0.04em;
    text-transform: uppercase; font-weight: 500;
    background: var(--accent-soft); color: var(--accent);
  }
  .job-tag-tax { background: #FFF3E6; color: var(--warn); }
  .job-tag-advisory { background: #EEEEFD; color: var(--accent); }
  .job-tag-annual { background: #EAF5EE; color: var(--success); }
  .job-tag-gst { background: #F5F1E8; color: var(--ink-soft); }
  .job-tag-writeoff { background: #FBEAE5; color: var(--danger); }
  .job-tag-other { background: #F5F1E8; color: var(--ink-soft); }
  .job-group-hours, .job-group-amount {
    font-family: 'JetBrains Mono', monospace; text-align: right; color: var(--ink-soft);
  }
  .job-group-entries { display: none; padding: 4px 12px 10px 30px; background: #FAF6EC; }
  .job-group.open .job-group-entries { display: block; }

  .wip-job-note {
    font-size: 10px; color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
    margin-top: 8px; font-style: italic;
  }

  /* When tabbed widget is active, hide the legacy <details> blocks */
  .card.has-wip-tabs > .details { display: none; }

  /* ─── View tabs (Review / Narrations) in toolbar ───────────── */
  .toolbar-center { display: flex; gap: 4px; }
  .toolbar-center[hidden] { display: none; }
  .view-tab {
    background: transparent; border: 1px solid transparent; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute);
    padding: 6px 14px; border-radius: 2px; transition: all 0.12s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .view-tab:hover:not(:disabled) { color: var(--ink); }
  .view-tab.active {
    background: var(--ink); color: #FFF; border-color: var(--ink);
  }
  .view-tab:disabled { cursor: not-allowed; opacity: 0.4; }
  .view-tab-badge {
    background: var(--accent-soft); color: var(--accent);
    font-size: 9px; padding: 2px 6px; border-radius: 8px; min-width: 18px;
    text-align: center; font-weight: 600;
  }
  .view-tab.active .view-tab-badge { background: rgba(255,255,255,0.2); color: #FFF; }

  /* ─── Resume previous session banner ───────────────────────── */
  .resume-banner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 14px 18px; margin-bottom: 16px;
    background: #FFFBF0; border: 1px solid var(--warn); border-radius: 3px;
    flex-wrap: wrap;
  }
  .resume-banner[hidden] { display: none; }
  .resume-banner-text { font-size: 13px; color: var(--ink); flex: 1; min-width: 200px; }
  .resume-banner-text strong { font-weight: 600; }
  .resume-banner-text .mono {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-soft);
  }
  .resume-banner-actions { display: flex; gap: 10px; align-items: center; }

  /* ─── Sticky progress bar ──────────────────────────────────── */
  .sticky-progress {
    position: sticky; top: 0; z-index: 40;
    background: var(--bg); padding: 10px 0 12px;
    margin-bottom: 12px; border-bottom: 1px solid var(--rule);
  }
  .sticky-progress-bar {
    height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden;
  }
  .sticky-progress-fill {
    height: 100%; background: var(--accent); transition: width 0.25s ease;
    width: 0%;
  }
  .sticky-progress-text {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-soft); margin-top: 6px; letter-spacing: 0.04em;
  }
  .sticky-progress-text .approved { color: var(--success); }
  .sticky-progress-text .adjusted { color: var(--warn); }
  .sticky-progress-text .manual { color: var(--ink-mute); }

  /* ─── Run period field ─────────────────────────────────────── */
  .run-period {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 18px; padding: 10px 16px;
    background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 3px;
    font-size: 12px; color: var(--ink-soft);
    flex-wrap: wrap;
  }
  .run-period-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute);
  }
  .run-period-input {
    background: var(--bg); border: 1px solid var(--rule); border-radius: 2px;
    padding: 5px 10px; font-family: inherit; font-size: 13px; color: var(--ink);
    min-width: 280px; flex: 1;
  }
  .run-period-input:focus { outline: none; border-color: var(--accent); }

  /* ─── Narrations view ──────────────────────────────────────── */
  .narrations-row {
    display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 16px;
    padding: 16px 18px; border: 1px solid var(--rule); border-radius: 3px;
    background: var(--bg-elev); margin-bottom: 12px;
    align-items: start;
  }
  @media (max-width: 760px) { .narrations-row { grid-template-columns: 1fr; } }
  .narrations-row-meta { min-width: 0; }
  .narrations-row-name { font-weight: 500; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
  .narrations-row-jobs {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--ink-soft); letter-spacing: 0.04em; margin-bottom: 8px;
  }
  .narrations-row-fee {
    font-family: 'JetBrains Mono', monospace; font-size: 13px;
    color: var(--ink); margin-bottom: 4px;
  }
  .narrations-row-fee .label {
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-mute); margin-right: 6px;
  }
  .narrations-row-status {
    display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9px;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px;
    border-radius: 2px; margin-top: 4px;
  }
  .narrations-row-status.approved { background: #DCFCE7; color: #1F7A4C; }
  .narrations-row-status.adjusted { background: #FEF3C7; color: #B45309; }

  .narrations-row-reopen {
    background: none; border: 0; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 6px; margin-top: 4px; margin-left: 6px;
    color: var(--ink-soft); border-radius: 2px;
    transition: background 0.12s, color 0.12s;
  }
  .narrations-row-reopen:hover { background: var(--ink); color: #FFF; }

  .narrations-controls { display: flex; flex-direction: column; gap: 8px; }
  .narrations-preset-select {
    background: var(--bg); border: 1px solid var(--rule); border-radius: 2px;
    padding: 6px 10px; font-family: inherit; font-size: 12px; color: var(--ink);
    width: 100%; cursor: pointer;
  }
  .narrations-preset-select:focus { outline: none; border-color: var(--accent); }
  .narrations-preset-select option[data-draft="1"] { color: var(--warn); }
  .narrations-bulk-link {
    background: none; border: 0; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    letter-spacing: 0.04em; color: var(--accent); padding: 0; text-align: left;
  }
  .narrations-bulk-link:hover { color: var(--ink); }
  .narrations-bulk-link:disabled { color: var(--ink-mute); cursor: not-allowed; }

  .narrations-text {
    background: var(--bg); border: 1px solid var(--rule); border-radius: 2px;
    padding: 10px 12px; font-family: inherit; font-size: 12px; color: var(--ink);
    width: 100%; min-height: 90px; resize: vertical; line-height: 1.5;
  }
  .narrations-text:focus { outline: none; border-color: var(--accent); }
  .narrations-text.empty { border-color: var(--warn); background: #FFFBF0; }

  .narrations-summary-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: var(--bg-elev);
    border: 1px solid var(--rule); border-radius: 3px; margin-bottom: 18px;
    flex-wrap: wrap; gap: 12px;
  }
  .narrations-summary-text {
    font-size: 13px; color: var(--ink-soft);
  }
  .narrations-summary-text strong { color: var(--ink); }

  /* When export button is enabled */
  #exportBtn:not(:disabled) {
    color: var(--success); font-weight: 500;
  }
  #exportBtn:disabled { opacity: 0.35; cursor: not-allowed; }

  /* Empty narrations state */
  .narrations-empty {
    padding: 60px 32px; text-align: center; color: var(--ink-mute);
    font-size: 13px; background: var(--bg-elev);
    border: 1px dashed var(--rule-strong); border-radius: 4px;
  }

  /* ─── Per-row narrations (v15) ──────────────────────────────── */
  /* Entity card wraps one or more job-rows. */
  .narrations-entity {
    border: 1px solid var(--rule); border-radius: 3px;
    background: var(--bg-elev); margin-bottom: 14px; overflow: hidden;
  }
  .narrations-entity-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 18px; border-bottom: 1px solid var(--rule);
    background: var(--bg);
  }
  .narrations-entity-name {
    font-weight: 500; font-size: 14px; color: var(--ink);
  }
  .narrations-entity-meta {
    display: flex; align-items: center; gap: 10px;
  }
  .narrations-entity-fee {
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--ink-soft);
  }
  .narrations-job-row {
    display: grid; grid-template-columns: 1.5fr 2.5fr; gap: 16px;
    padding: 14px 18px; border-top: 1px solid var(--rule);
    align-items: start;
  }
  .narrations-job-row:first-of-type { border-top: 0; }
  @media (max-width: 760px) {
    .narrations-job-row { grid-template-columns: 1fr; }
  }
  .narrations-job-meta { min-width: 0; }
  .narrations-job-name {
    font-size: 13px; color: var(--ink); margin-bottom: 4px;
  }
  .narrations-job-merge-tag {
    display: inline-block; padding: 1px 6px; margin-left: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: 2px; letter-spacing: 0.04em; text-transform: uppercase;
    vertical-align: middle;
  }
  .narrations-job-jobno {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--ink-mute); letter-spacing: 0.04em;
    margin-bottom: 8px; word-break: break-all;
  }
  .narrations-job-fee {
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--ink); margin-bottom: 6px;
  }
  .narrations-job-fee .label {
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-mute); margin-right: 6px;
  }
  .narrations-job-rowstatus {
    display: inline-block; font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 2px;
  }
  .narrations-job-rowstatus.needs { background: #FEF3C7; color: #B45309; }
  .narrations-job-rowstatus.done  { background: #DCFCE7; color: #1F7A4C; }
  .narrations-job-rowstatus.skip  { background: #F0EDE3; color: #4A4A4A; }
  .narrations-job-controls {
    display: flex; flex-direction: column; gap: 8px;
  }
  .narrations-write-off-note {
    font-size: 12px; color: var(--ink-mute); font-style: italic;
    padding: 6px 0;
  }

  /* ─── App states: demo / csv-empty / csv-loaded ─── */
  /* Default: demo state. Toolbar visible. Demo content visible. CSV stuff hidden. */
  .toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-bottom: 24px; padding: 12px 18px;
    background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 3px;
    flex-wrap: wrap;
  }
  .toolbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .toolbar-right { display: flex; align-items: center; gap: 10px; }
  .state-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 2px; font-weight: 500;
    background: #F5F1E8; color: var(--ink-soft);
  }
  body.has-csv .state-badge { background: #EAF5EE; color: var(--success); }
  .toolbar-text { font-size: 12px; color: var(--ink-soft); }
  .toolbar-text .mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink); }
  .ledger-status {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.04em; color: var(--ink-soft);
    padding: 4px 8px; border-left: 1px solid var(--rule); margin-left: 4px;
  }
  .ledger-status.has-data { color: var(--ink); }
  .ledger-status.has-data .count { font-weight: 600; }
  .toolbar-link {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
    background: none; border: 0; cursor: pointer; padding: 4px 8px;
  }
  .toolbar-link:hover { color: var(--ink); }
  .btn-primary {
    background: var(--ink); color: #FFF; border: 1px solid var(--ink);
    padding: 7px 14px; border-radius: 2px; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  }
  .btn-primary:hover { background: var(--accent); border-color: var(--accent); }

  /* Ledger menu dropdown */
  .ledger-menu-wrap { position: relative; display: inline-block; }
  .ledger-menu {
    position: absolute; top: 100%; right: 0; margin-top: 4px;
    background: var(--bg-elev); border: 1px solid var(--rule-strong);
    border-radius: 2px; min-width: 200px; padding: 4px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); z-index: 100;
    display: none;
  }
  .ledger-menu.open { display: block; }
  .ledger-menu button {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer;
    padding: 8px 14px; font-size: 12px; color: var(--ink);
    font-family: 'DM Sans', sans-serif;
  }
  .ledger-menu button:hover { background: var(--bg-soft); }
  .ledger-menu .menu-divider { height: 1px; background: var(--rule); margin: 4px 0; }
  .ledger-menu .menu-danger { color: var(--danger); }

  /* Drop zone (csv-empty state) */
  .drop-zone {
    display: none;
    border: 2px dashed var(--rule-strong); border-radius: 4px;
    padding: 60px 32px; text-align: center; background: var(--bg-elev);
    margin-bottom: 24px; transition: all 0.15s; cursor: pointer;
  }
  .drop-zone:hover, .drop-zone.dragover {
    border-color: var(--accent); background: var(--accent-soft);
  }
  .drop-zone-title {
    font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500;
    margin-bottom: 8px; color: var(--ink);
  }
  .drop-zone-sub {
    font-size: 13px; color: var(--ink-soft); max-width: 480px;
    margin: 0 auto 18px; line-height: 1.55;
  }
  .drop-zone-meta {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--ink-mute); letter-spacing: 0.06em;
    margin-top: 14px; line-height: 1.6;
  }
  .drop-zone-error {
    margin-top: 16px; padding: 10px 14px; background: #FBEAE5;
    border-left: 3px solid var(--danger); border-radius: 0 2px 2px 0;
    font-size: 12px; color: var(--ink); text-align: left;
    font-family: 'JetBrains Mono', monospace; line-height: 1.55;
    display: none;
  }
  .drop-zone-error.show { display: block; }

  /* State controls */
  body.csv-empty .drop-zone { display: block; }
  body.csv-empty .csv-content { display: none; }
  body.csv-empty .summary { display: none; }

  body.has-csv .drop-zone { display: none; }
  body.has-csv .csv-content { display: block; }
  body.has-csv .csv-content[hidden] { display: none; }

  /* Default: csv-content hidden until a CSV loads */
  .csv-content { display: none; }

  /* Disclaimer banner for stubbed engine fields when CSV loaded */
  .csv-disclaimer {
    background: #FFFBF0; border-left: 3px solid var(--warn); border-radius: 0 2px 2px 0;
    padding: 12px 18px; margin-bottom: 20px; font-size: 12px;
    color: var(--ink-soft); line-height: 1.55;
  }
  .csv-disclaimer strong { color: var(--ink); }

  .ai-review {
    margin: 18px 0 22px; padding: 18px 20px; background: #f4f5f2;
    border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink-soft);
  }
  .ai-review h2 { margin: 0 0 6px; color: var(--ink); font-size: 15px; }
  .ai-review-usage { margin: 0 0 12px; color: var(--ink-mute); font-size: 11px; }
  .ai-review-item { padding: 10px 0; border-top: 1px solid var(--rule); }
  .ai-review-item h3 { margin: 0 0 5px; color: var(--ink); font-size: 13px; }
  .ai-review-item p { margin: 4px 0; font-size: 12px; line-height: 1.5; }
  .ai-review-item .ai-review-fee { color: var(--ink); font-weight: 600; }
  .ai-review-item .ai-review-comparison { color: var(--ink-mute); font-size: 11px; }
  .ai-review-flag { color: #79500a; }

  /* Stubbed fee/history fields — when card has no engine output yet */
  .card.no-engine .suggestion-value { color: var(--ink-mute); font-style: italic; }
  .card.no-engine .suggestion-meta,
  .card.no-engine .reasoning,
  .card.no-engine .ai-summary,
  .card.no-engine .warnings,
  .card.no-engine .history,
  .card.no-engine .rule-path,
  .card.no-engine .confidence { display: none; }
  .card.no-engine .actions { display: none; }
  .card-engine-pending {
    margin-top: 14px; padding: 10px 14px; background: var(--bg);
    border: 1px dashed var(--rule-strong); border-radius: 2px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.04em; color: var(--ink-mute); text-align: center;
  }