/* Full-width Calendar "This month" section below the grid.
   Lives outside the #186 fit/height splitter band so the page scrolls to it. */
#calendarView .calendar-insight-band,
.calendar-insight-band {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  max-height: none;
  margin: 16px 0 0;
  padding: 16px;
  overflow-x: clip;
  color: #3d4a46;
  font-size: 14px;
  line-height: 1.4;
  background: var(--card, #fffdf8);
  border: 1px solid var(--line, #dedbd0);
  border-radius: 12px;
}

.calendar-month-insight {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.cmi-head {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cmi-kicker {
  color: #3d4a46;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cmi-verdict {
  margin: 0;
  color: #17231f;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cmi-hint,
.cmi-split,
.cmi-legend,
.cmi-cat-empty,
.cmi-unpaid,
.cmi-pay-note,
.cmi-pay-missing,
.cmi-pay-estimate {
  margin: 0;
  color: #3d4a46;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cmi-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.cmi-col,
.cmi-total {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line, #dedbd0);
  border-radius: 10px;
}

.cmi-col:focus,
.cmi-total:focus {
  outline: none;
}

.cmi-col:focus-visible,
.cmi-total:focus-visible,
.cmi-paycheck:focus-visible {
  outline: 2px solid #3164f4;
  outline-offset: 2px;
}

.cmi-label {
  min-width: 5.5em;
  color: #3d4a46;
  font-weight: 650;
  overflow-wrap: break-word;
  word-break: normal;
}

.calendar-insight-band strong,
.cmi-col strong,
.cmi-total strong,
.cmi-pay-next,
.cmi-pay-sts,
.cmi-pay-cash,
.cmi-pay-lowest {
  color: #17231f;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.cmi-pay-cash,
.cmi-pay-lowest,
.cmi-pay-sts,
.cmi-pay-next {
  margin: 0;
  font-size: 15px;
}

.cmi-col.is-negative strong,
.cmi-total.is-negative strong { color: #9b2c22; }
.cmi-col.is-positive strong,
.cmi-total.is-positive strong { color: #0f513d; }

.cmi-cats {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.cmi-cat-row {
  min-width: 0;
}

/* Category rows are buttons: tap or Enter opens what makes up the total. */
button.cmi-cat {
  width: 100%;
  margin: 0;
  padding: 4px 6px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button.cmi-cat:hover {
  background: rgba(23, 35, 31, 0.06);
}

button.cmi-cat:focus-visible {
  outline: 2px solid #3164f4;
  outline-offset: 1px;
}

button.cmi-cat[aria-expanded="true"] {
  background: rgba(40, 92, 244, 0.06);
  border-radius: 8px;
}

button.cmi-cat[aria-expanded="true"] .cmi-cat-label {
  font-weight: 700;
}

/* A turning arrow says "this opens". The empty alt text keeps screen
   readers on aria-expanded instead of reading the arrow. */
button.cmi-cat .cmi-cat-label::before,
button.cmi-subcat .cmi-txn-name::before {
  content: "\203A" / "";
  display: inline-block;
  width: 1.1em;
  font-size: 1.25em;
  line-height: 1;
  vertical-align: -0.1em;
  color: #56635f;
  transition: transform 0.15s ease;
}

button.cmi-cat[aria-expanded="true"] .cmi-cat-label::before,
button.cmi-subcat[aria-expanded="true"] .cmi-txn-name::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  button.cmi-cat .cmi-cat-label::before,
  button.cmi-subcat .cmi-txn-name::before {
    transition: none;
  }
}

button.cmi-subcat {
  width: 100%;
  margin: 0;
  padding: 2px 4px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button.cmi-subcat:hover {
  background: rgba(23, 35, 31, 0.06);
}

button.cmi-subcat:focus-visible,
button.cmi-txn-all:focus-visible {
  outline: 2px solid #3164f4;
  outline-offset: 1px;
}

.cmi-subcat-row {
  min-width: 0;
}

.cmi-cat-detail .cmi-subcat-detail {
  margin: 0 0 6px 4px;
  padding-left: 8px;
  border-left: 0;
}

.cmi-txn-count {
  color: #56635f;
  white-space: nowrap;
}

button.cmi-txn-all {
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: #1f5fd1;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.cmi-cat-detail {
  margin: 2px 0 6px 6px;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--line, #dedbd0);
}

.cmi-txns {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmi-txn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  color: #3d4a46;
  font-size: 13px;
  line-height: 1.35;
}

.cmi-txn.cmi-subcat {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cmi-txn-date {
  color: #56635f;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cmi-txn-name {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Narrow columns (three across at roughly 721-1099px): date and amount on
   the first line, the full-width name below, so names never squeeze into a
   sliver or print over the amount. */
@container cmi-col (max-width: 299px) {
  .cmi-txn {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 0;
    font-size: 12px;
  }

  .cmi-txn-date { order: 1; }
  .cmi-txn-amt { order: 2; margin-left: auto; }
  .cmi-txn-name { order: 3; flex: 1 0 100%; }

  .cmi-subcat .cmi-txn-name { order: 1; }
  .cmi-subcat .cmi-txn-amt { order: 2; }
}

.cmi-txn-amt {
  color: #17231f;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cmi-txn-tag {
  padding: 0 5px;
  font-size: 11px;
  border: 1px dashed currentColor;
  border-radius: 999px;
  white-space: nowrap;
}

.cmi-txn-more {
  margin: 4px 0 0;
  color: #56635f;
  font-size: 12px;
}

.cmi-cat {
  display: grid;
  grid-template-columns: minmax(5.5em, 1fr) auto auto;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.cmi-cat-label,
.cmi-cat-amt,
.cmi-cat-pct,
.cmi-pay-bill-name,
.cmi-pay-bill-date,
.cmi-pay-bill-amt {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.cmi-cat-label {
  min-width: 5.5em;
}

.cmi-cat-amt,
.cmi-cat-pct,
.cmi-pay-bill-amt {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cmi-cat-pct {
  color: #3d4a46;
  min-width: 2.5em;
  text-align: right;
}

.cmi-totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.cmi-history-unavailable {
  margin: 0;
  color: #17231f;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}

.calendar-insight-band[data-history-unavailable="true"] {
  display: grid;
  place-items: center;
  min-height: 72px;
}

.cmi-bar {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #8a857c;
}

.cmi-bar-income,
.cmi-bar-spend {
  display: block;
  min-width: 0;
  height: 100%;
}

.cmi-bar-income { background: #041f18; }
.cmi-bar-spend { background: #eef3ff; }

.cmi-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-weight: 650;
}

.cmi-legend-income,
.cmi-legend-spend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cmi-legend-income::before,
.cmi-legend-spend::before {
  content: "";
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.cmi-legend-income::before { background: #041f18; }
.cmi-legend-spend::before {
  background: #eef3ff;
  border: 1px solid #8a857c;
}

.cmi-paycheck {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line, #dedbd0);
  border-radius: 10px;
}

.cmi-paycheck h4,
.cmi-paycheck h5 {
  margin: 0;
  color: #17231f;
  font-size: 16px;
  font-weight: 750;
}

.cmi-paycheck h5 {
  margin-top: 6px;
  font-size: 13px;
}

.cmi-pay-bills {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmi-pay-bills li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

/* Narrow columns (three across at roughly 721-1099px): the label takes its
   own line and the amount and percent sit below it, so figures never print
   over each other and category names never break mid-word. */
.cmi-col {
  container-type: inline-size;
  container-name: cmi-col;
}

@container cmi-col (max-width: 259px) {
  .cmi-cat {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 2px;
  }

  .cmi-cat-label {
    flex: 1 0 100%;
    min-width: 0;
  }

  .cmi-cat-amt {
    flex: 1 0 auto;
  }

  /* When amount and percent no longer fit side by side, the percent moves
     to its own line instead of printing over the amount. */
  .cmi-cat-pct {
    min-width: 0;
    margin-left: auto;
  }
}

/* Dollar amounts never break in the middle (sign included). Totals scale
   down with their column instead of wrapping mid-number. */
.cmi-money {
  white-space: nowrap;
}

.cmi-total {
  container-type: inline-size;
  container-name: cmi-total;
}

.cmi-col > strong,
.cmi-total > strong {
  font-size: clamp(12px, 11cqi, 20px);
  white-space: nowrap;
  overflow-wrap: normal;
}

@media (min-width: 721px) {
  .cmi-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cmi-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 721px) and (max-width: 899px) {
  .cmi-columns,
  .cmi-totals {
    gap: 10px;
  }

  .cmi-col,
  .cmi-total {
    padding: 10px 8px;
  }

  .cmi-cat {
    gap: 4px;
  }
}

body[data-theme="midnight"] #calendarView .calendar-insight-band,
body[data-theme="midnight"] .calendar-insight-band {
  color: #c5cce6;
  background: #1a2040;
  border-color: #2c3358;
}

body[data-theme="midnight"] .cmi-col,
body[data-theme="midnight"] .cmi-total,
body[data-theme="midnight"] .cmi-paycheck {
  background: #141a36;
  border-color: #2c3358;
}

body[data-theme="midnight"] .cmi-kicker,
body[data-theme="midnight"] .cmi-label,
body[data-theme="midnight"] .cmi-hint,
body[data-theme="midnight"] .cmi-split,
body[data-theme="midnight"] .cmi-legend,
body[data-theme="midnight"] .cmi-cat-empty,
body[data-theme="midnight"] .cmi-unpaid,
body[data-theme="midnight"] .cmi-pay-note,
body[data-theme="midnight"] .cmi-pay-missing,
body[data-theme="midnight"] .cmi-pay-estimate,
body[data-theme="midnight"] .cmi-cat-pct {
  color: #c5cce6;
}

body[data-theme="midnight"] .cmi-verdict,
body[data-theme="midnight"] .cmi-history-unavailable,
body[data-theme="midnight"] .cmi-paycheck h4,
body[data-theme="midnight"] .cmi-paycheck h5 {
  color: #f3f5ff;
}

body[data-theme="midnight"] .calendar-insight-band strong,
body[data-theme="midnight"] .cmi-col strong,
body[data-theme="midnight"] .cmi-total strong,
body[data-theme="midnight"] .cmi-pay-next,
body[data-theme="midnight"] .cmi-pay-sts,
body[data-theme="midnight"] .cmi-pay-cash,
body[data-theme="midnight"] .cmi-pay-lowest {
  color: #f3f5ff;
}

body[data-theme="midnight"] .cmi-txn,
body[data-theme="midnight"] .cmi-txn-more {
  color: #c5cce6;
}

body[data-theme="midnight"] .cmi-txn-date,
body[data-theme="midnight"] .cmi-txn-count,
body[data-theme="midnight"] button.cmi-cat .cmi-cat-label::before,
body[data-theme="midnight"] button.cmi-subcat .cmi-txn-name::before {
  color: #9aa3c7;
}

body[data-theme="midnight"] button.cmi-txn-all {
  color: #8fb0ff;
}

body[data-theme="midnight"] button.cmi-subcat:hover {
  background: rgba(243, 245, 255, 0.07);
}

body[data-theme="midnight"] .cmi-txn-amt {
  color: #f3f5ff;
}

body[data-theme="midnight"] button.cmi-cat:hover {
  background: rgba(243, 245, 255, 0.07);
}

body[data-theme="midnight"] button.cmi-cat[aria-expanded="true"] {
  background: rgba(143, 176, 255, 0.12);
}

body[data-theme="midnight"] button.cmi-cat:focus-visible {
  outline-color: #8fb0ff;
}

body[data-theme="midnight"] .cmi-cat-detail {
  border-left-color: #2c3358;
}

body[data-theme="midnight"] .cmi-col.is-negative strong,
body[data-theme="midnight"] .cmi-total.is-negative strong { color: #fca5a5; }
body[data-theme="midnight"] .cmi-col.is-positive strong,
body[data-theme="midnight"] .cmi-total.is-positive strong { color: #6ee7b7; }

body[data-theme="midnight"] .cmi-bar {
  background: #6b75a0;
}

body[data-theme="midnight"] .cmi-bar-income { background: #5eead4; }
body[data-theme="midnight"] .cmi-bar-spend { background: #0b1224; }
body[data-theme="midnight"] .cmi-legend-income::before { background: #5eead4; }
body[data-theme="midnight"] .cmi-legend-spend::before {
  background: #0b1224;
  border: 1px solid #6b75a0;
}

body[data-theme="midnight"] .cmi-col:focus-visible,
body[data-theme="midnight"] .cmi-total:focus-visible,
body[data-theme="midnight"] .cmi-paycheck:focus-visible {
  outline-color: #93c5fd;
}

/* Touch screens: rows and buttons big enough to tap, detail text at 14px. */
@media (pointer: coarse) {
  button.cmi-cat,
  button.cmi-subcat,
  button.cmi-txn-all {
    min-height: 44px;
  }

  .cmi-txn,
  .cmi-txn-more {
    font-size: 14px;
  }

  .cmi-txn-tag {
    font-size: 12px;
  }
}