/* Dorax Finance — the icon of a fixed cost in its form (v257, features/plan/line-icon.js): the icon as it is and "Change icon"; open, the choice in
   the form itself: automatic, an image of one's own, the brands that have their logo, Dorax's drawings (the grid of css/components/cat-glyph.css). */
.li-field { display: flex; flex-direction: column; gap: 12px; }
.li-now { display: flex; align-items: center; gap: 12px; }
.li-now .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.li-now b { font-weight: 500; color: var(--ink-strong); }
.li-now small { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.li-now .btn { flex: none; }
.li-pick { display: flex; flex-direction: column; gap: 10px; max-height: min(60vh, 420px); overflow: auto; padding: 12px; border-radius: var(--r-mid); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.li-h { margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.li-up { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.li-up .btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.li-up .btn svg { width: 15px; height: 15px; }
.li-up .note { flex: 1 1 100%; margin: 0; }
.li-up .li-auto { padding-left: 6px; } .li-up .li-auto .cg { margin-right: 2px; }
.li-up .btn.on { border-color: var(--c, var(--brand)); box-shadow: inset 0 0 0 1px var(--c, var(--brand)); }
.li-up:focus-within label.btn { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 920px) { .li-now .btn, .li-up .btn { min-height: 44px; } }