/* Dorax Finance — the Plan on a computer (features/plan/plan-desk.view.js): the payments beside the month and its limits, in one screen; the income
   and the year one click away, as panels. */
.plan-tools { display: flex; justify-content: flex-end; gap: 8px; margin: -4px 0 -6px; }
.plan-desk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.plan-desk > div { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.plan-desk #plan-month .lim-month { margin: 0; }
.plan-desk #paylist td { white-space: nowrap; }
.plan-desk #paylist td:first-child { white-space: normal; }
/* beside the month, under 1600 px: the payments without their "Paid" column (the status says it), so the buttons stay in sight */
@media (max-width: 1600px) { .plan-desk #paylist thead th:nth-child(4), .plan-desk #paylist tbody tr:not(.grp) > td:nth-child(4) { width: 0; max-width: 0; padding: 0; overflow: hidden; font-size: 0; } }      /* kept as a cell, so the group rows still line up */
@media (max-width: 1240px) { .plan-desk { grid-template-columns: 1fr; } }
/* the income and the year: panels */
@media (min-width: 921px) {
  .drawer.pop.mid { width: min(820px, calc(100% - 48px)); }
  .drawer.pop.wide { width: min(1280px, calc(100% - 48px)); max-height: calc(100% - 48px); }
}
.pyr { padding: 0; }
.py-panel .card-h { padding: 4px 18px 0; }
.pyr .plan thead th:first-child, .pyr .plan th[scope="row"] { background: var(--lift); }
@media (max-width: 1600px) { .plan-desk #paylist th, .plan-desk #paylist td { padding-left: 10px; padding-right: 10px; } .plan-desk #paylist th:first-child, .plan-desk #paylist td:first-child { padding-left: 22px; } }
/* the income's panel on a phone: each payment set apart by a line, so its four fields read as one (2026-10-11) */
#overlay .payrows .payrow + .payrow { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }      /* each payment apart (on a computer too since v286: one paid every two weeks takes two lines) */
/* v283, v286: a pay every two weeks: under its payment, on a line of its own in the same columns (its last pay day, what it comes in as, its next
   pays); no "Goes to" (always the fixed costs). The average it counts as, in the amount's place. */
@media (min-width: 921px) {
  #overlay .payrow { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(170px, .9fr) minmax(0, .9fr) auto; }      /* "Every two weeks" read whole */
  #overlay .payrow > .iconbtn { grid-column: -2 / -1; }
}
.payrow > .pay-every { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: inherit; align-items: end; padding-top: 2px; }
.pay-every > .pay-next { grid-column: 3 / -1; align-self: center; gap: 2px; }
.pay-every > .pay-twin { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.pay-next > b { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.pay-next > small { font-size: 12px; color: var(--ink-3); }
.pay-est { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink-strong); }
.drawer .body > .pay-every { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.drawer .body > .pay-every > .pay-next { align-self: stretch; }
@media (max-width: 760px) {
  .payrow > .pay-every { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pay-every > .pay-next { grid-column: 1 / -1; }
}