/* Dorax Finance — Plan: "My income changes from month to month" (v252, features/plan/low-month.view.js). The switch and its line; when on, the
   last six months as bars (the weakest in the brand's green, the others quiet, a month without records as an outline), the figure, the button. */
.lm { display: flex; flex-direction: column; gap: 12px; }
.lm-head { display: flex; align-items: center; gap: 14px; }
.lm-head b { font-weight: 600; }
.lm-head p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.lm-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; }
.lm-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.lm-bar { position: relative; display: block; width: 100%; max-width: 40px; height: 64px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.lm-bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: var(--line-strong); }
.lm-col.low .lm-bar i { background: var(--brand); }
.lm-col.none .lm-bar { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.lm-col small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lm-col.low small { color: var(--ink); font-weight: 600; }
.lm-fig { margin: 0; font-size: 15px; line-height: 1.45; }
.lm-fig b { font-weight: 600; }
.lm-typed { max-width: 260px; }
.lm-act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lm-act .note, .lm .note { margin: 0; }
.lm-done, .lm-extra, .lm-say { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.lm-done svg, .lm-extra svg, .lm-say svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; }
.lm-done svg, .lm-extra svg { color: var(--brand); }
.lm-say { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
/* in the phone's income card: above the payments */
.pl-lm { padding: 4px 16px 14px; }
/* a finger: the switch, the field and the button are 44 px to tap (the switch's own track stays its size) */
@media (max-width: 920px) {
  .lm-head .switch { min-height: 44px; min-width: 44px; justify-content: center; }
  .lm .btn, .lm-typed input { min-height: 44px; }
}