/* Bureo shell M1: the summary row v2 (app/m1-summary.js) on the kit: 2-4 tiles (k-kt), the label small, the number large and light
   (as the hero's numerals), one quiet sub line, at most one small chart. Desk: one row, the lead card wider (m1-sum-lead). Narrower
   than 760 px, four cards go 2 x 2; narrower than 420 px (a phone, a narrow work panel): two cards side by side, three or four in one
   horizontal swipe row (scroll snap, the next card peeking), never a tall stack. Each card is its own size container: the numeral fits
   its card (the row's longest value, --m1-sumch, set by m1-summary.js), 18 to 30 px (the lead card up to 34 px), never cut, never an
   ellipsis; labels and sub lines wrap. A card with a go is a <button>: the whole card taps through. Light and dark come from the kit's
   tokens; a lime card keeps the lime with its dark ink in both themes. */
html.b-m1 .m1-sumw{container-type:inline-size;min-width:0;margin:0 0 12px}
html.b-m1 .m1-sum{display:grid;grid-template-columns:repeat(var(--m1-sumn,3),minmax(0,1fr));gap:10px;--m1-sumpad:18px;--m1-summax:30px}
html.b-m1 .m1-sum2{--m1-sumn:2}
html.b-m1 .m1-sum3{--m1-sumn:3}
html.b-m1 .m1-sum4{--m1-sumn:4}
html.b-m1 .m1-sum-lead.m1-sum2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
html.b-m1 .m1-sum-lead.m1-sum3{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr))}
html.b-m1 .m1-sum-lead.m1-sum4{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
html.b-m1 .m1-sum .m1-sumc{padding:16px var(--m1-sumpad) 16px;gap:4px;justify-content:flex-start;align-items:stretch;min-width:0;text-align:left;font:inherit;color:inherit;border:0;margin:0;width:100%}
/* the cards of a row share their rows (label, number, sub line, chart): every number sits on one line across the row, even when a
   label wraps */
html.b-m1 .m1-sum>.m1-sumc{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:4px;align-content:start;justify-content:stretch}
html.b-m1 .m1-sum>.m1-sumc>.m1-suml{align-self:end}
html.b-m1 .m1-sum button.m1-sumc{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,box-shadow .16s ease}
html.b-m1 .m1-sum button.m1-sumc:hover{transform:translateY(-1px);box-shadow:0 16px 34px -24px rgba(20,22,30,.5)}
html.b-m1 .m1-sum button.m1-sumc:active{transform:none}
html.b-m1 .m1-sum button.m1-sumc[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--k-text)}
html.b-m1 .m1-sum button.m1-sumc:focus-visible{outline:2px solid var(--k-text);outline-offset:2px}
html.b-m1 .m1-sum .m1-suml{display:block;font-size:14px;line-height:1.3;color:var(--k-text-2);white-space:normal;overflow-wrap:break-word}
/* a tabular light numeral is about .5 em wide per character (.52 to be safe); 100cqi = the card's content width (its own size
   container, a wrapper: a container on the card itself would stop the subgrid) */
html.b-m1 .m1-sum .m1-sumvw{display:block;container-type:inline-size;min-width:0}
html.b-m1 .m1-sum .m1-sumv{display:block;font-size:clamp(18px,calc((100cqi - 2px) / (var(--m1-sumch,8) * .52)),var(--m1-summax));line-height:1.15;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--k-text);margin:2px 0 0}
html.b-m1 .m1-sum .m1-sumc-lead .m1-sumv{font-size:clamp(18px,calc((100cqi - 2px) / (var(--m1-sumch,8) * .52)),calc(var(--m1-summax) + 4px))}
html.b-m1 .m1-sum .m1-sums{display:block;font-style:normal;font-size:14px;line-height:1.3;color:var(--k-text-3);white-space:normal;overflow-wrap:break-word}
html.b-m1 .m1-sum .m1-sum-warn .m1-sums{color:var(--k-warn-ink)}
html.b-m1 .m1-sum .m1-sum-lime{background:var(--k-accent)}
html.b-m1 .m1-sum .m1-sum-lime :is(.m1-suml,.m1-sumv,.m1-sums){color:var(--k-accent-ink)}
html.b-m1 .m1-sum .m1-sum-lime :is(.m1-suml,.m1-sums){opacity:.75}
/* the one small chart: quiet, the card's own palette (soft fills, the text ink, warn only for overdue, lime only as the lead's mark) */
html.b-m1 .m1-sum .m1-sumch{display:block;margin-top:auto;padding-top:10px;align-self:end;grid-row:4;width:100%}
html.b-m1 .m1-sum .m1-spbox{display:block;position:relative;height:34px}
html.b-m1 .m1-sum .m1-spbox svg{display:block;width:100%;height:100%;overflow:visible}
html.b-m1 .m1-sum .m1-spline{fill:none;stroke:var(--k-text-2);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
html.b-m1 .m1-sum .m1-sparea{fill:var(--ka-soft);opacity:.7;stroke:none}
html.b-m1 .m1-sum .m1-spdot{position:absolute;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:var(--k-text);box-shadow:0 0 0 3px var(--ka-card)}
html.b-m1 .m1-sum .m1-sumbars{display:flex;gap:8px;height:56px;align-items:stretch}
html.b-m1 .m1-sum .m1-sumb{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}
html.b-m1 .m1-sum .m1-sumbx{display:block;width:100%;max-width:36px;height:calc(var(--h) * .55);min-height:4px;border-radius:5px;background:color-mix(in srgb,var(--k-text) 13%,transparent)}
html.b-m1 .m1-sum .m1-sumbx.m1-sumb0{height:2px;min-height:2px;border-radius:1px;background:var(--k-line-strong)}
html.b-m1 .m1-sum .m1-sumb-warn{background:var(--k-warn)}
html.b-m1 .m1-sum .m1-sumb-hi{background:var(--k-accent)}
html.b-m1 .m1-sum .m1-sumb-fc{background:repeating-linear-gradient(135deg,var(--k-line-strong) 0 2px,transparent 2px 7px);box-shadow:inset 0 0 0 1px var(--k-line-strong)}
html.b-m1 .m1-sum .m1-sumb small{font-size:13px;line-height:1.1;color:var(--k-text-3);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
html.b-m1 .m1-sum .m1-sum-lime .m1-spline{stroke:var(--k-accent-ink)}
html.b-m1 .m1-sum .m1-sum-lime .m1-sparea{fill:var(--k-accent-ink);opacity:.08}
html.b-m1 .m1-sum .m1-sum-lime .m1-spdot{background:var(--k-accent-ink);box-shadow:0 0 0 3px var(--k-accent)}
/* the single quiet line (a short list): the numbers in a sentence */
html.b-m1 .m1-sumw1{margin:2px 4px 12px}
html.b-m1 .m1-sumline{margin:0;font-size:15px;line-height:1.5;color:var(--k-text-2)}
html.b-m1 .m1-sumline .m1-suml1{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0}
html.b-m1 .m1-sumline .m1-suml1 b{font-weight:500;color:var(--k-text);font-variant-numeric:tabular-nums;white-space:nowrap}
html.b-m1 .m1-sumline button.m1-suml1{cursor:pointer;text-decoration:underline;text-decoration-color:var(--k-line-strong);text-underline-offset:3px}
html.b-m1 .m1-sumline button.m1-suml1:hover{text-decoration-color:currentColor}
html.b-m1 .m1-sumline .m1-sum-warn{color:var(--k-warn-ink)}
html.b-m1 .m1-sumline .m1-sum-warn b{color:var(--k-warn-ink)}
html.b-m1 .m1-sumdot{color:var(--k-text-3)}
/* four cards need room for a seven-digit amount each: 2 x 2 below 760 px */
@container (max-width:760px){html.b-m1 .m1-sum4,html.b-m1 .m1-sum-lead.m1-sum4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a phone or a narrow panel: two cards side by side; three or four: one swipe row, the lead card a little wider */
@container (max-width:420px){
  html.b-m1 .m1-sum{gap:8px;--m1-sumpad:14px;--m1-summax:26px}
  html.b-m1 .m1-sum2,html.b-m1 .m1-sum-lead.m1-sum2{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.b-m1 .m1-sum3,html.b-m1 .m1-sum4{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0 2px;padding:2px 2px 14px;margin:-2px -2px -14px}
  html.b-m1 .m1-sum3::-webkit-scrollbar,html.b-m1 .m1-sum4::-webkit-scrollbar{display:none}
  html.b-m1 :is(.m1-sum3,.m1-sum4)>.m1-sumc>.m1-suml{align-self:auto}
  html.b-m1 :is(.m1-sum3,.m1-sum4)>.m1-sumc{display:flex;flex:0 0 calc((100% - 16px) * .44);scroll-snap-align:start}
  html.b-m1 :is(.m1-sum3,.m1-sum4).m1-sum-lead>.m1-sumc{flex-basis:calc((100% - 16px) * .42)}
  html.b-m1 :is(.m1-sum3,.m1-sum4).m1-sum-lead>.m1-sumc-lead{flex-basis:calc((100% - 16px) * .53)}
  html.b-m1 :is(.m1-sum3,.m1-sum4).m1-sum-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:0;margin:0}
  html.b-m1 .m1-sum .m1-sumc{padding:14px var(--m1-sumpad)}
  html.b-m1 .m1-sum .m1-sumb small{font-size:14px}
  html.b-m1 .m1-sum .m1-spbox{height:30px}
}
@media (prefers-reduced-motion:reduce){html.b-m1 .m1-sum button.m1-sumc{transition:none}html.b-m1 .m1-sum button.m1-sumc:hover{transform:none}}
/* the group's overview cards (acct-canvas.js .b-grp-num, styled in bureo-ds.css by the viewport width): on M1 the numeral follows
   the cards' own row, so a narrow work panel never cuts «574.0…» (HQ slice-3 review) */
html.b-m1 .b-grp .b-grp-nums{container-type:inline-size}
html.b-m1 .b-grp .b-grp-num b{font-size:clamp(22px,4.6cqi,32px);text-overflow:clip}

/* the quiet line (App fix 1, HQ 38 review): a screen whose cards would only say 0 € / a date shows one faint line instead */
html.b-m1 .m1-sumq{margin:0 0 var(--k-s5,12px);font-size:var(--k-t-sm,14px)}