.rules-view{max-width:1260px;margin:0 auto}
.rules-count-badge{padding:9px 14px;border:1px solid #cbd5e9;border-radius:999px;background:#f7f9fd;color:#526079;font-size:13px;font-weight:800}
.rules-layout{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:18px;align-items:start}
.rule-editor-card,.rules-list-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 10px 28px rgba(31,52,105,.05)}
.rule-editor-card{display:grid;gap:15px;position:sticky;top:20px}
.rule-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rule-editor-heading h3{margin:4px 0 0}
.rule-editor-heading button{border:0;background:transparent;color:#4058cf;font-weight:800;min-height:44px;padding:0 8px}
.rule-editor-card label{display:flex;flex-direction:column;gap:7px;color:#526079;font-size:13px;font-weight:800}
.rule-editor-card label small{font-size:12px;font-weight:500;color:#7a859a}
.rule-editor-card input,.rule-editor-card select,.rule-sheet-card input,.rule-sheet-card select{box-sizing:border-box;width:100%;min-height:45px;padding:10px 12px;border:1px solid #ccd5e8;border-radius:11px;background:#fff;font:600 15px "DM Sans",sans-serif}
.rule-rename-promoted{order:0}
.rule-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rule-editor-card .rule-check{flex-direction:row;align-items:center;padding:12px;background:#f7f9fd;border-radius:11px}
.rule-check input{width:18px;min-height:18px}
.rule-editor-card>button.primary,.rule-sheet-card>button.primary{min-height:45px;border:0;border-radius:11px;background:#3f55c9;color:#fff;font-weight:800}
.rule-chip-field{margin:0;padding:0;border:0;display:grid;gap:8px}
.rule-chip-field legend{padding:0;color:#526079;font-size:13px;font-weight:800}
.rule-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.rule-chip{min-height:44px;padding:0 14px;border:1px solid #ccd5e8;border-radius:11px;background:#fff;color:#344aad;font:800 13px "DM Sans",sans-serif;cursor:pointer}
.rule-chip.is-active{border-color:#3f55c9;background:#edf1ff;color:#24399f}
.rule-advanced{border:1px solid #e4eaf6;border-radius:12px;padding:10px 12px;background:#fbfcff}
.rule-advanced summary{cursor:pointer;font-weight:800;color:#4058cf;min-height:44px;display:flex;align-items:center}
.rule-advanced[open]{display:grid;gap:12px}
.rule-save-gate,.rule-broad-warn,.rule-apply-status{margin:0;font-size:13px;font-weight:700;line-height:1.4}
.rule-save-gate{color:#a34139}
.rule-broad-warn{color:#8a6a12;background:#fff8e6;border:1px solid #f0e0a8;border-radius:10px;padding:10px 12px}
.rule-apply-status{color:#334ab7}
.rule-apply-status[data-kind="error"]{color:#b34038}
.rule-apply-status[data-kind="success"]{color:#087353}
.rules-list-card{padding:0;overflow:hidden}
.rules-preview-panel{padding:18px 20px 8px;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--card) 92%, #eef3ff)}
.rules-preview-head{display:flex;align-items:end;justify-content:space-between;gap:12px}
.rules-preview-head h3{margin:4px 0 0}
.rules-preview-live{color:#526079;font-size:12px;font-weight:800}
.rules-preview-sub{margin:8px 0 12px;color:#7a859a;font-size:12px;font-weight:600}
.rules-preview-rows{display:grid;gap:8px}
.rules-preview-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;padding:8px 10px;border:1px solid #e4eaf6;border-radius:12px;background:var(--card,#fff);cursor:pointer;text-align:left}
.rules-preview-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#edf1ff;color:#334ab7;font-weight:900}
.rules-preview-copy{min-width:0;display:grid;gap:2px}
.rules-preview-copy strong,.rules-preview-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rules-preview-before,.rules-preview-meta{color:#6f7b91;font-size:12px;font-weight:600}
.rules-preview-amount{font-weight:800;font-size:14px;white-space:nowrap}
.rules-preview-amount.expense{color:var(--coral,#c44)}
.rules-preview-amount.income{color:var(--green,#1a7f4a)}
.rules-preview-empty,.rules-preview-more{margin:0;padding:12px 4px;color:#667188;font-size:13px;font-weight:600}
.rules-list-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.rules-list-toolbar h3{margin:0}
.rules-list-toolbar label{display:flex;flex-direction:column;gap:5px;color:#68738b;font-size:12px;font-weight:800}
.rules-list-toolbar input{min-height:38px;padding:8px 11px;border:1px solid #ccd5e8;border-radius:10px}
/* Darin: stack match meta + outcome so half-column Rules list never overlaps chips */
.rule-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "match actions"
    "outcome actions";
  align-items:start;
  column-gap:14px;
  row-gap:10px;
  padding:15px 20px;
  border-bottom:1px solid #e8edf6;
}
.rule-match{grid-area:match;display:flex;align-items:flex-start;gap:11px;min-width:0}
.rule-icon{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:11px;background:#edf1ff;color:#334ab7;font-weight:900}
.rule-match>div{min-width:0;flex:1 1 auto}
.rule-match strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rule-match small{
  display:block;
  margin-top:3px;
  color:#6f7b91;
  font-size:12px;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}
.rule-meta-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rule-meta-chip{padding:4px 8px;border-radius:8px;background:#eef2fb;color:#40507a;font-size:11px;font-weight:800}
.rule-meta-chip.is-renamed{background:#e8f8ef;color:#1f7a4d}
.rule-outcome{
  grid-area:outcome;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
  font-size:12px;
}
.rule-outcome>span{padding:5px 8px;border-radius:8px;background:#f4f6fb}
.rule-outcome .rule-excluded{background:#fff1ef;color:#a34139}
.rule-row-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.rule-row-actions button{min-height:44px;padding:0 12px;border:1px solid #ccd5e8;border-radius:9px;background:#fff;color:#344aad;font-weight:800}
.rule-row-actions .danger,.rule-impact-actions .danger{color:#aa4038}
.rules-empty{padding:50px 24px;text-align:center;color:#667188}
.rules-empty p{margin:6px 0}
.transaction-page-actions{display:flex;gap:9px;align-items:center}
.transaction-page-actions>button:first-child{min-height:42px;padding:0 14px;border:1px solid #cbd5e9;border-radius:11px;background:#fff;color:#344aad;font-weight:800}

.transaction-group-row-shell{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:stretch;gap:0;border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent)}
.transaction-group-row-shell .transaction-group-row{border-top:0}
.txn-row-more{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--muted,#667188);font-size:22px;line-height:1;cursor:pointer;border-radius:10px}
.txn-row-more:hover,.txn-row-more:focus-visible{background:color-mix(in srgb, var(--card) 70%, #e8edf8);outline:none}
.txn-row-menu{position:absolute;z-index:40;min-width:220px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--card,#fff);box-shadow:0 12px 30px rgba(20,36,80,.16);display:grid;gap:4px}
.txn-row-menu button{min-height:44px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:#3147b0;font-weight:800;text-align:left;cursor:pointer}
.txn-row-menu button:hover{background:#eef2ff}
.txn-rename-with-rule{min-height:44px}
.txn-rename-detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.txn-rename-detail-actions .txn-rename-with-rule{
  padding:0 14px;
  border:1px solid #ccd5e8;
  border-radius:11px;
  background:#fff;
  color:#344aad;
  font-weight:800;
  cursor:pointer;
}

.rule-sheet{border:0;padding:0;background:transparent;max-width:100vw;width:100vw;margin:0;max-height:100vh}
.rule-sheet::backdrop{background:rgba(12,18,40,.45)}
.rule-sheet-card{margin-top:auto;max-height:min(92vh,720px);overflow:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:var(--card,#fff);display:grid;gap:12px;box-shadow:0 -12px 40px rgba(10,20,50,.2)}
.rule-sheet[open]{display:flex;flex-direction:column;justify-content:flex-end}
.rule-sheet-head{display:flex;align-items:start;justify-content:space-between;gap:12px}
.rule-sheet-head h3{margin:4px 0 0}
.rule-sheet-close{min-height:44px;border:0;background:transparent;color:#4058cf;font-weight:800}
.rule-sheet-sub{margin:0;color:#7a859a;font-size:12px;font-weight:600}
.rule-sheet-preview{max-height:220px;overflow:auto}
.rule-impact-dialog{border:0;padding:0;background:transparent;max-width:min(560px,94vw)}
.rule-impact-dialog::backdrop{background:rgba(12,18,40,.45)}
.rule-impact-card{padding:20px;border-radius:18px;background:var(--card,#fff);display:grid;gap:12px;box-shadow:0 18px 50px rgba(12,22,55,.22)}
.rule-impact-card h3{margin:4px 0 0}
.rule-impact-summary,.rule-impact-warning{margin:0;font-size:14px;line-height:1.45;font-weight:600;color:#526079}
.rule-impact-warning{color:#8a6a12}
.rule-impact-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.rule-impact-actions button{min-height:44px;padding:0 14px;border-radius:11px;font-weight:800;cursor:pointer}
.rule-impact-actions .secondary{border:1px solid #ccd5e8;background:#fff;color:#344aad}
.rule-impact-actions .danger{border:1px solid #f0c4bf;background:#fff1ef}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){
  .rules-layout{grid-template-columns:1fr}
  .rule-editor-card{position:static}
  .transaction-page-actions{flex-wrap:wrap}
}
@media(max-width:720px){
  .rule-impact-dialog{max-width:100vw;width:100vw;margin:0;max-height:100vh}
  .rule-impact-dialog[open]{display:flex;flex-direction:column;justify-content:flex-end}
  .rule-impact-card{border-radius:18px 18px 0 0;max-height:min(92vh,720px);overflow:auto;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media(max-width:600px){
  .rules-count-badge{font-size:12px}
  .rule-editor-grid{grid-template-columns:1fr}
  .rule-row{
    grid-template-columns:1fr;
    grid-template-areas:
      "match"
      "outcome"
      "actions";
    padding:14px;
  }
  .rule-row-actions{justify-content:flex-start}
  .transaction-page-actions{width:100%;justify-content:flex-start}
  .transaction-page-actions button{flex:1}
}

/* Midnight — on-dark secondaries / DM surface rule */
body[data-theme="midnight"] .rule-editor-card label,
body[data-theme="midnight"] .rule-chip-field legend,
body[data-theme="midnight"] .rules-preview-live,
body[data-theme="midnight"] .rules-list-toolbar label,
body[data-theme="midnight"] .rule-match small,
body[data-theme="midnight"] .rules-preview-sub,
body[data-theme="midnight"] .rules-preview-before,
body[data-theme="midnight"] .rules-preview-meta,
body[data-theme="midnight"] .rules-preview-empty,
body[data-theme="midnight"] .rules-preview-more,
body[data-theme="midnight"] .rule-apply-status,
body[data-theme="midnight"] .rules-empty,
body[data-theme="midnight"] .rule-sheet-sub,
body[data-theme="midnight"] .rule-impact-summary,
body[data-theme="midnight"] .txn-row-more{
  color:var(--on-dark-muted, #a9b4cc);
}
body[data-theme="midnight"] .rule-editor-card label small{
  color:var(--on-dark-muted, #a9b4cc);
}
body[data-theme="midnight"] .rule-chip,
body[data-theme="midnight"] .rule-row-actions button,
body[data-theme="midnight"] .txn-row-menu button{
  background:color-mix(in srgb, var(--card) 88%, transparent);
  border-color:var(--border-on-dark, rgba(243,246,255,.28));
  color:var(--on-dark, #f3f6ff);
}
/* A2: impact Cancel keeps white fill → on-light ink (DM surface rule) */
body[data-theme="midnight"] .rule-impact-actions .secondary{
  background:#fff;
  color:var(--on-light, #101a37);
  border-color:rgba(16,26,55,.22);
}
body[data-theme="midnight"] .rule-chip.is-active{
  background:color-mix(in srgb, #6d86ff 22%, var(--card));
  border-color:color-mix(in srgb, #6d86ff 55%, var(--border-on-dark, #445));
  color:var(--on-dark, #f3f6ff);
}
body[data-theme="midnight"] .rules-preview-row,
body[data-theme="midnight"] .rule-advanced,
body[data-theme="midnight"] .txn-row-menu,
body[data-theme="midnight"] .rule-sheet-card,
body[data-theme="midnight"] .rule-impact-card{
  background:var(--card);
  border-color:var(--border-on-dark, rgba(243,246,255,.28));
  color:var(--on-dark, #f3f6ff);
}
body[data-theme="midnight"] .rules-preview-avatar,
body[data-theme="midnight"] .rule-icon{
  background:color-mix(in srgb, #6d86ff 18%, var(--card));
  color:var(--on-dark, #f3f6ff);
}
body[data-theme="midnight"] .rule-meta-chip{
  background:color-mix(in srgb, var(--card) 70%, #1b2440);
  color:var(--on-dark-muted, #a9b4cc);
}
body[data-theme="midnight"] .rule-meta-chip.is-renamed{
  color:var(--lime, #53f0d0);
  background:color-mix(in srgb, var(--lime, #53f0d0) 14%, var(--card));
}
body[data-theme="midnight"] .rule-editor-card input,
body[data-theme="midnight"] .rule-editor-card select,
body[data-theme="midnight"] .rule-sheet-card input,
body[data-theme="midnight"] .rules-list-toolbar input{
  background:color-mix(in srgb, var(--card) 70%, #0d1428);
  border-color:var(--border-on-dark, rgba(243,246,255,.28));
  color:var(--on-dark, #f3f6ff);
}
body[data-theme="midnight"] .rule-editor-card .rule-check{
  background:color-mix(in srgb, var(--card) 80%, #121a33);
  color:var(--on-dark, #f3f6ff);
}
body[data-theme="midnight"] .rule-broad-warn,
body[data-theme="midnight"] .rule-impact-warning{
  color:#f0d78a;
  background:color-mix(in srgb, #f0d78a 12%, var(--card));
  border-color:color-mix(in srgb, #f0d78a 35%, var(--border-on-dark, #445));
}
body[data-theme="midnight"] .rule-save-gate{color:#ffb4a8}
body[data-theme="midnight"] .rule-apply-status{color:#9db0ff}
body[data-theme="midnight"] .rule-apply-status[data-kind="error"]{color:#ffb4a8}
body[data-theme="midnight"] .rule-apply-status[data-kind="success"]{color:var(--lime, #53f0d0)}
body[data-theme="midnight"] .rule-editor-heading button,
body[data-theme="midnight"] .rule-sheet-close,
body[data-theme="midnight"] .rule-advanced summary{
  color:var(--lime, #53f0d0);
}