/* ── Reconcile — flat ledger view, deliberately not the rounded/soft-shadow
     look used everywhere else in the app (see .receipt-card, .event-card,
     .detail-panel) ── */

  .recon-head { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
  .recon-head h2 { font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:300; color:var(--text-dim); }

  .recon-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .recon-field {
    background:var(--surface); border:1px solid var(--border); border-radius:2px;
    color:var(--text); font-family:'DM Mono', monospace; font-size:12px;
    padding:6px 10px; outline:none; box-shadow:none; cursor:pointer; min-width:0;
  }
  input.recon-field { cursor:text; min-width:200px; }
  .recon-field:focus { border-color:var(--accent2); box-shadow:none; }

  .recon-btn {
    display:inline-flex; align-items:center; gap:6px; background:transparent;
    border:1px solid var(--border); border-radius:2px; color:var(--text-dim);
    font-family:'DM Mono', monospace; font-size:11px; padding:6px 12px; cursor:pointer;
    transition:border-color 0.12s, color 0.12s;
  }
  .recon-btn:hover { border-color:var(--muted); color:var(--text); }
  .recon-btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
  .recon-btn-primary:hover { background:#3d4e3e; border-color:#3d4e3e; color:#fff; }

  /* Bleed the table to the viewport edge on narrow screens so it can scroll
     horizontally instead of squashing columns — same technique as .cal-grid-wrap */
  .recon-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); }

  .recon-table { width:100%; min-width:720px; border-collapse:collapse; font-size:12px; background:var(--surface); }
  .recon-table thead th {
    text-align:left; font-size:9px; text-transform:uppercase; letter-spacing:0.12em;
    color:var(--muted); padding:10px 14px; border-bottom:2px solid var(--border);
    white-space:nowrap; font-weight:500;
  }
  .recon-table th.recon-sortable { cursor:pointer; user-select:none; }
  .recon-table th.recon-sortable:hover { color:var(--text); }
  .recon-arrow { font-size:8px; margin-left:2px; color:var(--accent2); }

  .recon-table tbody tr { border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.1s; }
  .recon-table tbody tr:hover { background:var(--panel); }
  .recon-table tbody td { padding:9px 14px; color:var(--text-dim); vertical-align:middle; white-space:nowrap; }
  .recon-table td.recon-vendor { color:var(--text); font-weight:500; }
  .recon-table .recon-muted { color:var(--muted); }

  .recon-num { text-align:right; font-variant-numeric:tabular-nums; }
  .recon-table td.recon-num { color:var(--expense); font-weight:500; }

  .recon-cat-tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); }
  .recon-cat-dot { width:7px; height:7px; border-radius:1px; flex-shrink:0; }

  .recon-col-file, .recon-col-actions { width:1%; text-align:center; }
  .recon-icon-btn {
    display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
    background:transparent; border:none; border-radius:2px; color:var(--muted); cursor:pointer;
    transition:background 0.12s, color 0.12s;
  }
  .recon-icon-btn:hover { background:var(--border); color:var(--text); }
  .recon-icon-btn.recon-icon-danger:hover { background:rgba(192,57,43,0.12); color:var(--danger); }

  .recon-table tbody tr.recon-empty-row { cursor:default; }
  .recon-table tbody tr.recon-empty-row:hover { background:transparent; }
  .recon-empty-row td { text-align:center; padding:40px 14px; color:var(--muted); font-size:12px; }

  .recon-table tfoot td {
    padding:10px 14px; border-top:2px solid var(--border); border-bottom:none;
    color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  }
  .recon-table tfoot td.recon-num { color:var(--text); font-size:14px; text-transform:none; letter-spacing:0; font-weight:600; }

  @media (max-width: 640px) {
    .recon-toolbar { width:100%; }
    input.recon-field { min-width:0; flex:1 1 100%; }
  }