/* Bureo shell M1: the list row (app/m1-row.js, owner's variant A «Mehki kvadrat»): a 40 px soft square, 12 px corners, whose colour
   says the kind (out warn, in ok, grant lime, pay info, the rest neutral); the title 15 px medium over a 13.5 px quiet sub line; on the
   right the amount (tabular, + in the ok ink) over its chip. Light and dark from the kit's tokens; on a phone the row's own buttons wrap under the text, the amount stays on the right (at most 40 % of the row, a long chip on
   two lines); the name column never drops under 120 px. */
html.b-m1 .k-du.m1r{gap:14px;padding:12px 0;font-size:15px;align-items:center;min-width:0}
html.b-m1 button.k-du.m1r{width:100%;border:0;border-top:1px solid var(--ka-soft);background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:0}
html.b-m1 .k-dues>button.k-du.m1r:first-child{border-top:0}
@media (hover:hover){html.b-m1 button.k-du.m1r:hover .m1r-t{text-decoration:underline;text-underline-offset:3px}}
html.b-m1 button.k-du.m1r:focus-visible{outline:2px solid var(--k-focus,var(--k-info));outline-offset:2px;border-radius:12px}
.m1r-ic{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--k-surface-2);color:var(--k-text)}
.m1r-ic svg{width:20px;height:20px;display:block}
.m1r-ic.m1r-out{background:var(--k-warn-soft);color:var(--k-warn)}
.m1r-ic.m1r-in{background:var(--k-ok-soft);color:var(--k-ok)}
.m1r-ic.m1r-grant{background:var(--k-accent);color:var(--k-accent-ink)}
.m1r-ic.m1r-pay{background:var(--k-info-soft);color:var(--k-info)}
.m1r-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.m1r-t{font-size:15px;font-weight:500;display:block;overflow-wrap:break-word;hyphens:auto}
html.b-m1 .k-du.m1r small.m1r-s{font-size:13.5px;color:var(--k-text-2);display:block;overflow-wrap:anywhere;white-space:normal;font-variant-numeric:normal}
.m1r-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.m1r-amt{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--k-text)}
.m1r-amt.m1r-plus{color:var(--k-ok)}
.m1r-amt.m1r-warn{color:var(--k-warn-ink)}
.m1r-end .k-spill{font-size:12px}
@media (max-width:560px){
  html.b-m1 .k-du.m1r{gap:12px;flex-wrap:wrap;row-gap:6px}
  html.b-m1 .k-du.m1r>.m1r-tx{flex:1 1 120px;min-width:0}   /* the name keeps room: a row's own button wraps under it, never squeezes it */
  html.b-m1 .k-du.m1r>.m1r-end{max-width:40%;min-width:min-content}   /* never narrower than the amount: it is never cut */
  html.b-m1 .k-du.m1r>.m1r-end .k-spill{white-space:normal;text-align:right}
  html.b-m1 .k-du.m1r>:is(.k-btn,.m1v-act){margin-left:52px}
  html.b-m1 .k-du.m1r>.k-btn+.k-btn{margin-left:0}
}
/* the row's primary «open» (row.open): one button over the whole row; the square, the words and the amount let the tap through,
   the row's own controls (lead checkbox, extra buttons, links) stay on top as their own targets */
html.b-m1 .k-du.m1r.m1r-o{position:relative}
.m1r-open{position:absolute;inset:0;width:100%;border:0;margin:0;padding:0;background:none;cursor:pointer;border-radius:12px;z-index:0}
.m1r-open:focus-visible{outline:2px solid var(--k-focus,var(--k-info));outline-offset:2px}
@media (hover:hover){.k-du.m1r.m1r-o:hover .m1r-t{text-decoration:underline;text-underline-offset:3px}}
.k-du.m1r.m1r-o>:not(.m1r-open){position:relative;z-index:1}
.k-du.m1r.m1r-o>:is(.m1r-ic,.m1r-tx,.m1r-end){pointer-events:none}
.k-du.m1r.m1r-o .m1r-end :is(a,button){pointer-events:auto}