/* Kommende betalinger og advarsler (feature F3). Tokens only, so dark mode follows tokens.css. */
.cal-filters{ margin-bottom:16px }
.cal-alerts, .cal-stats, .cal-main{ margin-bottom:16px }
.cal-main{ align-items:start }
.cal-card .empty{ padding:18px }

/* dated payments */
.cal-list{ list-style:none; margin:0; padding:0 }
.cal-row{ display:grid; grid-template-columns:92px minmax(0,1fr) auto 84px; gap:4px 12px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--hair) }
.cal-row:last-child{ border-bottom:0 }
.cal-row.faded{ color:var(--ink-2) }
.cal-row.faded .pill{ opacity:.7 }
.cal-row.missing .cal-when, .cal-row.missing .cal-what b{ color:var(--neg) }
.cal-when{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap }
.cal-wd{ color:var(--ink-3); font-weight:500 }
.cal-what{ min-width:0; display:flex; flex-direction:column; gap:2px }
.cal-what b{ font-size:13.5px; font-weight:600 }
.cal-what small{ font-size:12px; color:var(--ink-2); line-height:1.45 }
.cal-what small.cal-parts{ color:var(--ink-3) }
.cal-amt{ font-size:13.5px; font-weight:650; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.cal-st{ text-align:right }
.cal-later{ margin:14px 0 2px; font-size:12px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em }
@media (max-width: 760px){
  .cal-row{ grid-template-columns:minmax(0,1fr) auto; }
  .cal-when{ grid-column:1 }
  .cal-st{ grid-column:2; grid-row:1 }
  .cal-what{ grid-column:1 / -1 }
  .cal-amt{ grid-column:1 / -1; text-align:left }
}

/* lowest point */
.cal-lowest{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; margin-bottom:10px; border-radius:11px;
  background:var(--sunk); border:1px solid var(--hair) }
.cal-kicker{ font-size:12.5px; color:var(--ink-2); font-weight:600 }
.cal-figure{ font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:1.2; white-space:nowrap }
.cal-sub{ font-size:12.5px; color:var(--ink-2) }
.cal-sub b{ font-weight:650 }

/* warnings */
.cal-alert p.cal-seen{ font-size:11.5px; color:var(--ink-3); margin-top:4px }
.cal-alert.done b{ color:var(--ink-2) }
.cal-none{ display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--ink-2); padding:6px 0 }
.cal-more{ margin-top:12px }
.cal-more > summary{ list-style:none; cursor:pointer; display:flex; gap:6px; align-items:center; font-size:13px;
  font-weight:600; color:var(--ink-2); padding:6px 0 }
.cal-more > summary::-webkit-details-marker{ display:none }
.cal-more > summary svg{ transition:transform .15s }
.cal-more[open] > summary svg{ transform:rotate(90deg) }
.cal-more > .alerts{ margin-top:8px }

/* tables and forms */
.cal-pad{ padding:0 20px 16px }
.cal-weeks .tablewrap{ border-radius:0 }
.cal-settings{ padding:0; margin-bottom:16px }
.cal-settings > summary{ list-style:none; cursor:pointer; display:flex; gap:8px; align-items:center; padding:14px 20px; flex-wrap:wrap }
.cal-settings > summary::-webkit-details-marker{ display:none }
.cal-settings > summary svg{ transition:transform .15s }
.cal-settings[open] > summary svg{ transform:rotate(90deg) }
.cal-settings > summary .faint{ font-size:12px; margin-left:auto }
.cal-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 18px; padding:4px 20px 18px }
.cal-form .field{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-2); font-weight:500 }
.cal-form .cal-wide{ grid-column:1 / -1 }
.cal-form textarea.input{ font:inherit; font-size:13px; resize:vertical; min-height:96px; width:100% }
.cal-form .seg{ flex-wrap:wrap }