/* Numexia · phase 3 « feedback et clôture » (piste D): rich toast after an expense, grouped overruns, closing screen,
   guided start of the month. Loaded after theme-d-screens.css. Outfit for text, Unbounded for big numbers. */

/* ---------- Rich toast after an expense ---------- */
.toasts { width: min(calc(100vw - 32px), 460px); }
.spend-toast { --tone: var(--accent); --tone-ink: var(--ink-1); position: relative; padding: 12px 14px 10px; border-radius: 18px; background: var(--surface-3); color: var(--ink-1);
  border: 1px solid var(--border-strong); border-left: 4px solid var(--tone); box-shadow: var(--shadow-pop); font: 400 14px/1.4 var(--font); }
.spend-toast.tone-good { --tone: var(--st-good); --tone-ink: var(--pos); }
.spend-toast.tone-warning { --tone: var(--st-warning); --tone-ink: var(--warn-ink); }
.spend-toast.tone-critical { --tone: var(--st-critical); --tone-ink: var(--neg); }
.spend-toast.tone-plain { --tone: var(--ink-3); --tone-ink: var(--ink-2); }
.st-head { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "amt where close" "state state state"; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.st-amount { grid-area: amt; font: 500 20px/1.15 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.st-where { grid-area: where; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.st-where strong { font-weight: 600; }
.st-sub { color: var(--ink-2); font-size: 12.5px; }
.st-state { grid-area: state; font-size: 12.5px; font-weight: 600; color: var(--tone-ink); }
.spend-toast .st-close { grid-area: close; align-self: start; width: 32px; height: 32px; min-height: 32px; margin: -6px -6px 0 0; font-size: 14px; color: var(--ink-2); }
.st-bar { position: relative; height: 6px; margin: 10px 0 8px; border-radius: 999px; background: var(--track); }
.st-bar > i { display: block; height: 100%; max-width: 100%; border-radius: 999px; background: var(--tone); }
.st-bar > b { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--ink-1); }
.st-left { margin: 0; font-size: 14px; }
.st-left strong { font: 500 15px/1.2 var(--font-display); letter-spacing: -0.01em; }
.st-perday { color: var(--ink-2); }
.st-sentence { margin: 2px 0 0; font-weight: 600; color: var(--tone-ink); }
.spend-toast.tone-good .st-sentence { color: var(--ink-1); }
.st-week { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--inset); font-size: 13px; color: var(--ink-2); }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.st-actions .btn { min-height: 38px; }
.st-actions .btn.ghost { color: var(--accent-text); }
.st-cover { white-space: normal; text-align: left; }
@media (max-width: 520px) { .st-actions .st-cover { flex: 1 1 100%; justify-content: center; text-align: center; } .st-actions .btn.ghost { flex: 1 1 0; } }
.st-cover.is-warn { background: color-mix(in srgb, var(--st-warning) 22%, var(--surface-2)); color: var(--ink-1); border-color: color-mix(in srgb, var(--st-warning) 45%, transparent); }
.spend-toast .calc { margin-top: 4px; }
.spend-toast .calc-lines { max-height: 38vh; overflow: auto; }

/* ---------- À faire: grouped overruns ---------- */
.cover-unfold { display: inline-block; margin: 4px 0 2px; }
.cover-lines { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 8px; }
.cover-lines li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-radius: 12px; background: var(--inset); border: 1px solid var(--border); }
.cover-lines .cl-name { font-weight: 600; }
.cover-lines .cl-amt { font: 500 14px/1.3 var(--font-display); color: var(--neg); }
.cover-lines .cl-text { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); }
.cover-lines .btn { grid-column: 1 / -1; justify-self: start; }

/* ---------- Closing screen ---------- */
.closeout .co-verdict { display: grid; gap: 8px; }
.co-verdict .verdict-text { margin: 2px 0 0; }
.co-score { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding: 12px 14px; border-radius: 16px; background: var(--inset); border: 1px solid var(--border); }
.co-score-num { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.co-score-num strong { font: 500 34px/1 var(--font-display); letter-spacing: -0.03em; color: var(--tone-ink); }
.co-score-num span { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.co-score-text { flex: 1; min-width: 0; display: grid; gap: 8px; }
.co-score-label { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.co-score .d-bar > i { background: var(--tone); }
.co-parts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.co-parts li { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.co-parts li.is-off { opacity: .78; }
.co-parts p { margin: 4px 0 0; color: var(--ink-2); }
.co-part-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.co-part-head > span:first-child { font-weight: 600; }
.co-part-head strong { font: 500 15px/1.2 var(--font-display); margin-left: auto; }
@media (min-width: 900px) { .co-parts { grid-template-columns: 1fr 1fr; } }

.co-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; }
.co-fams { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.co-fams li { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.co-fam-head { display: flex; align-items: center; gap: 8px; }
.co-fam-head .grow { flex: 1; }
.co-rest { font: 500 16px/1.2 var(--font-display); color: var(--pos); }
.co-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.co-choices .chip, .co-all .chip { min-height: 36px; padding: 6px 12px; font-size: 13px; white-space: normal; text-align: left; }
.co-def { opacity: .75; font-weight: 400; }
.co-fams p { margin: 2px 0 0; }
.co-effect { margin: 12px 0 2px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); }
.co-q { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: q; }
.co-q li { counter-increment: q; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.co-q .co-q-text { font-weight: 600; }
.co-q li > strong { font: 500 16px/1.2 var(--font-display); }
.co-q li > .muted { grid-column: 1 / -1; }
.co-q .co-q-free { grid-template-columns: 1fr; }
.co-q textarea { width: 100%; resize: vertical; min-height: 72px; font: 400 14px/1.4 var(--font); }
.co-cap-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.co-cap-list li { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: 6px; }
.co-cap-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.co-cap-val { font: 500 16px/1.2 var(--font-display); color: var(--accent-text); }
.co-cap-list .btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.co-finish { display: grid; gap: 6px; justify-items: start; padding: 4px 2px 8px; }
.co-finish .btn { min-height: 46px; padding: 0 20px; }
.co-card .co-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.co-note { margin: 4px 0 0; font-weight: 500; }

/* ---------- Guided start of the month ---------- */
.plan-start { display: grid; gap: 10px; padding: 18px 20px; background: linear-gradient(160deg, var(--hero-1), var(--surface) 62%); border-color: var(--hero-border); box-shadow: var(--hero-shadow); }
.ps-income { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink-2); }
.ps-income strong { font: 500 clamp(30px, 6vw, 40px)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--ink-1); }
.ps-cascade { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.ps-step { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; animation: rise .4s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
.ps-label { font-size: 14px; min-width: 0; }
.ps-amt { font: 500 15px/1.2 var(--font-display); letter-spacing: -0.01em; }
.ps-bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--track); }
.ps-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transform-origin: left; animation: grow-x .7s var(--ease) both; }
.ps-besoins .ps-bar i { background: var(--g-besoins, var(--accent)); }
.ps-envies .ps-bar i { background: var(--g-envies, var(--st-warning)); }
.ps-free .ps-bar i, .ps-goals .ps-bar i { background: var(--st-good); }
.ps-pots .ps-bar i { background: var(--st-warning); }
.ps-fixes .ps-bar i { background: var(--ink-3); }
.ps-extras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-extras li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; }
.ps-ask { display: grid; gap: 2px; text-align: left; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--accent-line); background: var(--inset); color: var(--ink-1); cursor: pointer; font: inherit; }
.ps-ask:hover { border-color: var(--accent); }
.ps-q { margin: 0; font-weight: 600; }
.ps-form { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--inset); border: 1px solid var(--border); }
.ps-fields { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ps-fields { grid-template-columns: 120px 1fr 1fr; } }
.ps-fields .input { width: 100%; }
.ps-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-actions .btn { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .ps-step, .ps-bar i { animation: none !important; }
}
.co-unc { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.co-unc li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.co-unc-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.co-unc strong { font: 500 16px/1.2 var(--font-display); }
.co-unc-eff { grid-column: 1 / -1; }
.co-cap-list .btn-row .btn { flex: 0 1 auto; }

/* v19.20 · Imprévus: the switch in the add sheet, the badge, the Plan row of the reserve, the Analyses card. */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.field-head-end { justify-content: flex-end; }
.chip.imp-switch, .addform .chip.imp-switch { min-height: 30px; padding: 3px 10px 3px 4px; font-size: 13px; gap: 6px; flex: none; box-shadow: none; }
.imp-knob { position: relative; width: 26px; height: 16px; border-radius: 999px; background: var(--border); flex: none; transition: background .2s; }
.imp-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); transition: transform .2s var(--ease, ease); }
.chip.imp-switch.on { background: color-mix(in srgb, var(--warn-ink, #d9a441) 18%, var(--surface-2)); color: var(--ink); border-color: color-mix(in srgb, var(--warn-ink, #d9a441) 55%, transparent); }
:root[data-theme="light"] .chip.imp-switch.on { color: var(--ink); }
.chip.imp-switch.on .imp-knob { background: var(--warn-ink, #d9a441); }
.chip.imp-switch.on .imp-knob::after { transform: translateX(10px); }
.imp-note { margin: -2px 0 6px; }
.tx-badge.imp { color: var(--warn-ink, #d9a441); border-color: color-mix(in srgb, var(--warn-ink, #d9a441) 45%, transparent); background: color-mix(in srgb, var(--warn-ink, #d9a441) 10%, transparent); }
.imp-meta { display: grid; gap: 2px; margin-top: 2px; }
.imp-meta .er-meta { display: flex; flex-wrap: wrap; column-gap: 4px; margin: 0; }
.imp-meta .er-meta > span + span::before { content: '· '; }
.imp-meta .imp-cap { padding: 0; min-height: 0; font: inherit; }
.imp-meta .imp-sugg { color: var(--ink-2); }
.imp-meta .imp-sugg.is-full { color: var(--pos, var(--accent)); font-weight: 600; }
.imp-meta .calc { margin-top: 2px; }
.imp-cap-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.imp-cap-edit .env-input { width: 96px; }
.kind-badge.kind-reserve { text-transform: none; }
.imp-kpis { margin-bottom: 10px; }
.imp-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.imp-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); }
.imp-list li:last-child { border-bottom: 0; }
.imp-what { min-width: 0; overflow-wrap: anywhere; }
.imp-amt { white-space: nowrap; }
.imp-advice { margin: 6px 0 4px; }
@media (max-width: 560px) {
  .imp-meta .er-meta { flex-direction: column; row-gap: 0; line-height: 1.4; }
  .imp-meta .imp-cap { line-height: 1.4; display: inline; }
  .imp-meta .er-meta > span + span::before { content: none; }
  .imp-meta .calc-wrap { width: calc(100% + 160px); position: relative; z-index: 1; }
  .imp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imp-list li { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
}