/* Życie w tygodniach: tylko to, czego nie ma we wspólnych arkuszach (shared/public/css/). */

/* Pole daty: szersze niż kwota, bo przeglądarki dokładają ikonę kalendarza */
.money.date { width: 230px; }
.money.date input { font-size: 18px; }

/* Etapy życia: kolor etapu (--life-* w tokens.css) jako --sw w legendzie i kwadrat w dymku */
.child { --sw: var(--life-child); }
.school { --sw: var(--life-school); }
.work { --sw: var(--life-work); }
.retired { --sw: var(--life-retired); }
.sw-child { background: var(--life-child); }
.sw-school { background: var(--life-school); }
.sw-work { background: var(--life-work); }
.sw-retired { background: var(--life-retired); }

/* Przyszłe tygodnie: ten sam kolor etapu, jasny przez krycie (jeden token na etap w obu trybach). Na ciemnym tle
   większe krycie, bo przy tym samym przyszłe tygodnie prawie znikały (zrzuty 2026-11-05). */
:root { --life-future: .32; }
@media (prefers-color-scheme: dark) { :root { --life-future: .5; } }

/* Legenda odcieni: przykładowa kratka w kolorze pracy, bo to najdłuższy etap */
.legend.stages, .legend.states { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.legend.states { margin-top: 10px; }
.legend.states li::before { border-radius: 2px; }
.legend .lived { --sw: var(--life-work); }
.legend .now { --sw: var(--ink); }
.legend .future { --sw: color-mix(in srgb, var(--life-work) calc(var(--life-future) * 100%), var(--surface)); }
.legend .beyond { --sw: var(--line); }

/* Siatka: figura z legendą nad siatką, bo siatka jest wysoka i legenda pod nią byłaby poza ekranem */
.combo.life figcaption { border-top: 0; border-bottom: 1px solid var(--line); }
.grid-life { display: block; width: calc(100% - 24px); margin: 12px; touch-action: pan-y; }
.grid-life text { font: 11px var(--mono); fill: var(--muted); }
.grid-life text.today, .grid-life text.expected { fill: var(--ink); font-weight: 600; }
.wk.lived-child { fill: var(--life-child); }
.wk.lived-school { fill: var(--life-school); }
.wk.lived-work { fill: var(--life-work); }
.wk.lived-retired { fill: var(--life-retired); }
.wk.future-child { fill: var(--life-child); fill-opacity: var(--life-future); }
.wk.future-school { fill: var(--life-school); fill-opacity: var(--life-future); }
.wk.future-work { fill: var(--life-work); fill-opacity: var(--life-future); }
.wk.future-retired { fill: var(--life-retired); fill-opacity: var(--life-future); }
.wk.beyond { fill: var(--line); }
.wk.now { fill: var(--ink); }