/* The dashboard's month card (B6) */
.mdb-card { padding: 22px 24px; }
.mdb-card h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 2px; font-size: 24px; }
.mdb-sub, .mdb-quiet { margin: 0 0 14px; color: var(--ink-500, #56657a); font-size: 14px; }
.mdb-steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mdb-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 10px; border-radius: var(--radius); }
.mdb-step div { display: grid; gap: 2px; }
.mdb-step small { color: var(--ink-500, #56657a); font-size: 13px; }
.mdb-num { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; font-size: 13px; font-weight: 600; }
.mdb-current { background: var(--accent-soft, #e8eff9); }
.mdb-current .mdb-num { border-color: var(--accent); background: var(--accent); color: #fff; }
.mdb-done .mdb-num { border-color: transparent; background: var(--good-soft, #e7f5ee); color: var(--good, #067647); }
.mdb-upcoming b, .mdb-not_built b { font-weight: 500; color: var(--ink-700, #2a3950); }
.mdb-not_built .mdb-num { border-style: dashed; }
/* The step not built yet reads quieter through solid colours that pass AA (4.5:1) on the card in both themes, not through opacity. */
.mdb-not_built b, .mdb-not_built .mdb-num { color: var(--ink-500, #5a6478); }
.mdb-not_built small { color: var(--ink-400, #646c80); }
.mdb-head { display: flex; align-items: flex-start; gap: 16px; }
.mdb-head > div { min-width: 0; }
.mdb-count { display: grid; margin: 4px 0 0 auto; text-align: right; }
.mdb-count b { font-size: 24px; line-height: 1.1; color: var(--heading-900); white-space: nowrap; }
.mdb-count small { color: var(--ink-500, #56657a); font-size: 12px; }
p.mdb-done { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-alt); font-size: 14px; }
.mdb-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.mdb-line { display: grid; gap: 4px; padding: 16px 18px; color: inherit; text-decoration: none; }
.mdb-line b { font-size: 16px; }
.mdb-line small { color: var(--ink-500, #56657a); font-size: 13px; }
.mdb-line em { margin-top: 6px; color: var(--accent); font-style: normal; font-size: 13px; font-weight: 600; }
.mdb-line:hover em, .mdb-line:focus-visible em { text-decoration: underline; }
.mdb-spark { display: block; width: 100%; max-width: 240px; height: 44px; }
@media (max-width: 860px) {
  .mdb-lines { grid-template-columns: 1fr; }
  .mdb-step { grid-template-columns: 32px minmax(0, 1fr); }
  .mdb-step .btn { grid-column: 2; justify-self: start; }
}

/* Decision of September 21: the retention warning is one line under the month card, only when it applies */
/* B7: the mid-month preview on the card */
.mdb-preview-pill { background: var(--accent-soft, #e8eff9); color: var(--accent); }
.mdb-offer { margin: 12px 0 0; font-size: 13px; color: var(--ink-500, #56657a); }
.mdb-offer small { font-size: 13px; }
.mdb-note { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius); background: #fdf1f1; color: #8a1c1c; font-size: 13px; }
.mdb-early { margin-top: 16px; padding: 18px 20px; }

/* F7: the latest approved month in words above the bars */
.mdb-spark-latest { font-size: 16px; }

/* F11: the preview's estimate as the card's headline figure, and the next things while the month-end file is awaited */
.mdb-estimate { display: grid; gap: 2px; margin: 4px 0 14px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft, #e8eff9); border-radius: var(--radius); }
.mdb-estimate b { font-size: 26px; line-height: 1.15; }
.mdb-estimate small { color: var(--ink-500, #56657a); font-size: 13px; }
.mdb-next ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.mdb-crumbs { margin: 0 0 12px; }