/* month_report.css v1.0.1 - the Month report page (TASK-2026-181, slice 2C-b). Classes of the approved mockup (month-report v7); the shared mr-* / mb-* pieces live in multi_branch.css. Logical sides only. */
/* the period row */
.mr-period { align-items: flex-end; margin-bottom: var(--space-4); }
.mr-period .form-group { margin-bottom: 0; }
.mr-pick { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mr-pick select { width: auto; min-width: 0; }
.mr-period label { display: flex; align-items: center; gap: 0; }

/* figures */
.mr-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-num bdi { unicode-bidi: isolate; }
.mr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-4); }
.mr-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mr-kpis .kpi-value { font-size: var(--fs-title); white-space: nowrap; }
/* v7: four tiles of one height; the label line, then one sub line (badge + "vs month") pinned to the bottom */
.mr-kpis { align-items: stretch; }
.mr-kpis .kpi-card { display: flex; flex-direction: column; }
.mr-kpis .kpi-value { margin-bottom: var(--space-2); }
.mr-kpis .kpi-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.mr-kpis .kpi-label .mr-kpi-x::before { content: "\00B7"; margin-inline-end: var(--space-2); }
.mr-kpi-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: auto; padding-top: var(--space-3); font-size: var(--fs-small); color: var(--muted); cursor: default; }
.mr-kpi-sub:focus-visible { outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; }
.kpi-delta { font-size: var(--fs-small) !important; line-height: 1.4; }

/* page grids */
.mr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
/* v7: the two cards of a row share one height; their content stays at the top */
.mr-grid > .card { display: flex; flex-direction: column; }
.mr-grid > .card > .card-body { flex: 1 1 auto; }
.mr-grid.is-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mr-grid > .card { min-width: 0; }
.mr-tab { display: grid; gap: var(--space-4); padding-block-end: var(--space-4); }

/* label/value rows: small grey label, the value leads */
.mr-rows { margin: 0; display: grid; }
.mr-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding-block: var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 3px solid transparent; }
.mr-row + .mr-row { border-top: 1px solid var(--line); }
.mr-row dt { display: flex; align-items: center; gap: var(--space-1); min-width: 0; color: var(--muted); font-size: var(--fs-small); }
.mr-row dt .info-tip { margin-inline-start: var(--space-1); }
.mr-row dd { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; font-weight: 700; font-size: var(--mr-fs-val); text-align: end; min-width: 0; }
.mr-row dd small { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.mr-row[data-tone="warn"] { border-inline-start-color: var(--warning); }
.mr-row[data-tone="ok"] { border-inline-start-color: var(--success); }

/* a list of shares: name, share, amount, a thin bar */
.mr-total { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line-strong); font-weight: 700; font-size: var(--mr-fs-val); }
.mr-total > span:first-child { color: var(--muted); font-weight: 400; font-size: var(--fs-small); }

/* a folded part: one quiet line, opens under itself */
.mr-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: 0; margin-top: var(--space-3); border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; text-align: start; }
.mr-fold:hover .mr-fold-t { color: var(--brand); }
.mr-fold-t { font-weight: 700; }
.mr-fold-m { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-small); }
.mr-fold i { color: var(--muted); transition: transform .2s; }
.mr-fold[aria-expanded="true"] i { transform: rotate(180deg); }
.mr-fold-p[hidden] { display: none; }
.mr-fold-p .table-wrapper { margin-top: var(--space-2); }

/* tables in cards */
.mr-card .table-wrapper { box-shadow: none; }
.mr-card .table-wrapper > .mr-tbl { min-width: 420px; }
.mr-card .table-wrapper > .mr-tbl.is-wide { min-width: 560px; }
.mr-tbl td .mr-sub { display: block; color: var(--muted); font-size: var(--fs-small); }
.mr-tbl tr[data-tone="warn"] > td:first-child { box-shadow: inset calc(var(--mr-s, 1) * -3px) 0 0 var(--warning); }
.mr-tbl tr[data-tone="ok"] > td:first-child { box-shadow: inset calc(var(--mr-s, 1) * -3px) 0 0 var(--success); }
html[dir="ltr"] .mr-tbl { --mr-s: -1; }
.mr-tbl td.mr-h, .mr-tbl th.mr-h { width: 44px; text-align: center; }
/* the hint column holds (i) buttons, not row actions: it scrolls with the row instead of the app's sticky action column */
.table-wrapper .mr-tbl :is(td, th).mr-h { position: static !important; }
.mr-tbl tfoot td { font-weight: 700; border-top: 1px solid var(--line-strong); }
.mr-muted { color: var(--muted); }

/* Style C hints: the app's (i) square, in warning and OK colours */
.info-tip.mr-hint { font-weight: 700; }
.info-tip.mr-hint--warn { background: var(--warning-tint); border-color: var(--warning-line); color: var(--warning); }
.info-tip.mr-hint--ok { background: var(--success-tint); border-color: var(--success-line); color: var(--success); }
.info-tip.mr-hint--ok i { font-size: 11px; }
.mr-ic { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--radius); border: 1px solid var(--line-strong); font-size: 11px; }
.mr-ic.is-ok { background: var(--success-tint); border-color: var(--success-line); color: var(--success); }
.mr-ic.is-warn { background: var(--warning-tint); border-color: var(--warning-line); color: var(--warning); font-weight: 700; font-size: var(--fs-small); }

/* v5 charts: the app's chart tokens (--chart-*, TASK-2026-164), one axis each, values on hover */
:root { --mr-seq-1: #034959; --mr-seq-2: #327C8C; --mr-seq-3: #63B6C9; --mr-seq-4: #B8E1EC; }
html[data-theme="retailpower-dark"] { --mr-seq-1: #B8E1EC; --mr-seq-2: #63B6C9; --mr-seq-3: #3C9AAE; --mr-seq-4: #2C6B78; }
/* v7: values 15px bold; the daily bars one step lighter than --chart-1 in both themes (the page's teal step, 3:1 or more against the card), the hovered bar darker in light, lighter in dark */
:root { --mr-fs-val: 1.0714rem; --mr-day: #3C9AAE; --mr-day-hi: var(--chart-1); --mr-bar-h: 12px; }
html[data-theme="retailpower-dark"] { --mr-day: #3C9AAE; --mr-day-hi: #63B6C9; }
.mr-viz { position: relative; width: 100%; min-height: 320px; margin-top: var(--space-3); }
.mr-viz svg { display: block; width: 100%; overflow: visible; }
.mr-viz .ax { font-size: 13px; fill: var(--chart-label); font-family: inherit; }
.mr-viz .b.is-day { fill: var(--mr-day); }
.mr-viz .day:hover .b.is-day, .mr-viz .day:focus .b.is-day { fill: var(--mr-day-hi); }
.mr-viz .grid { stroke: var(--chart-grid); stroke-width: 1; }
.mr-viz .zero { stroke: var(--chart-zero); stroke-width: 1; }
.mr-viz .pace { stroke: var(--chart-ref); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.mr-viz .b { fill: var(--chart-1); }
.mr-viz .b.is-best { fill: var(--success-solid); }
.mr-viz .b.is-worst { fill: var(--warning-solid); }
.mr-viz .hit { fill: transparent; cursor: default; }
.mr-viz .day:hover .b, .mr-viz .day:focus .b { fill: var(--chart-1-hi); }
.mr-viz .day:hover .hit { fill: var(--chart-grid); fill-opacity: .35; }
.mr-viz .day:focus { outline: none; }
.rp-chart-legend.mr-legend { padding: 0; gap: var(--space-1) var(--space-5); font-size: var(--fs-small); align-items: center; }
.rp-chart-legend.mr-legend .rp-chart-sw.is-square { width: 10px; height: 10px; }
.rp-chart-legend.mr-legend b { color: var(--text); font-weight: 700; }
.mr-legend .rp-chart-sw.is-ref { border-top-color: var(--chart-ref); }

/* the month in short */
/* v7: the verdict across the top, then two equal columns (why it changed | what to do) whose rows share one height, then the plan fold */
.mr-verdict .card-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.mr-vd-head { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.mr-vd-head .mr-ic { width: 44px; height: 44px; font-size: 18px; }
.mr-vd-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(3, minmax(60px, auto)); grid-auto-flow: column; column-gap: var(--space-6); }
.mr-vd-col { grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; min-width: 0; }
.mr-vd-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); font-size: var(--fs-small); font-weight: 700; color: var(--text); line-height: 1.4; }
.mr-vd-h > span { font-weight: 400; color: var(--muted); }
.mr-vd-list { grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; min-width: 0; }
.mr-vd-list > li { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding-block: var(--space-2); }
.mr-vd-list > li + li { border-top: 1px solid var(--line); }
.mr-vd-n { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; line-height: 1.4; }
.mr-vd-n > small { color: var(--muted); font-size: var(--fs-small); }
.mr-vd-v { flex: none; font-weight: 700; font-size: var(--mr-fs-val); }
.mr-vd-list .btn { flex: none; }
.mr-verdict .card-body > .mr-vd-plan > .mr-fold { margin-top: 0; }
.mr-verdict[data-tone] { border-inline-start: 4px solid var(--line-strong); }
.mr-verdict[data-tone="ok"] { background: var(--success-tint); border-color: var(--success-line); border-inline-start-color: var(--success); }
.mr-verdict[data-tone="warn"] { background: var(--warning-tint); border-color: var(--warning-line); border-inline-start-color: var(--warning); }
.mr-verdict[data-tone] .card-header { background: transparent; border-bottom-color: var(--line); }
.mr-vd-t { display: grid; gap: var(--space-1); min-width: 0; }
.mr-vd-t strong { font-size: var(--fs-display-s, 2.2857rem); line-height: 1.2; }
.mr-verdict[data-tone="ok"] .mr-vd-t strong { color: var(--success); }
.mr-verdict[data-tone="warn"] .mr-vd-t strong { color: var(--warning); }
.mr-vd-t span { color: var(--text); font-size: var(--fs-body); }

/* v6: why it changed, under the verdict */
.mr-ic.is-up { background: var(--success-tint); border-color: var(--success-line); color: var(--success); }
.mr-ic.is-down { background: var(--warning-tint); border-color: var(--warning-line); color: var(--warning); }
.mr-plan { display: grid; gap: var(--space-4); padding-top: var(--space-3); }
.mr-plan-t { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.mr-plan-t > div { display: grid; gap: 2px; min-width: 0; }
.mr-plan-t small { color: var(--muted); font-size: var(--fs-small); }
.mr-plan-t b { font-size: var(--fs-title); }
.mr-plan-h { font-weight: 700; font-size: var(--fs-small); color: var(--muted); }
/* v6: the six-month trend */
.mr-viz.is-trend { min-height: 200px; }
.mr-viz .b2 { fill: var(--chart-2); }
.mr-viz .b.is-sofar, .mr-viz .b2.is-sofar { fill-opacity: .45; }
.mr-viz .mo:hover .b, .mr-viz .mo:hover .b2 { fill-opacity: .8; }
.mr-viz .mo:hover .hit { fill: var(--chart-grid); fill-opacity: .35; }
.mr-viz .day[data-act] { cursor: pointer; }
.mr-viz .day:focus-visible .hit { fill: var(--chart-grid); fill-opacity: .5; stroke: var(--focus); stroke-width: 2; }
/* v6: the day close slip summary */
.mr-dy-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.mr-dy-k > div { display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.mr-dy-k small { color: var(--muted); font-size: var(--fs-small); }
.mr-dy-k b { font-size: var(--fs-body-lg); }
.mr-dy-h { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.mr-shift { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.mr-shift + .mr-shift { margin-top: var(--space-3); }
.mr-shift-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); min-height: 40px; font-weight: 700; }
.mr-shift-h small { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }

/* horizontal bars: name, bar, value - one scale per card */
.mr-hb { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.mr-hb > li { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) minmax(5.5rem, auto); align-items: center; gap: var(--space-3); }
.mr-hb .mr-hb-n { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.mr-hb .mr-hb-r { display: inline-block; min-width: 1.4em; color: var(--muted); font-size: var(--fs-small); }
.mr-hb .mr-hb-n small { display: block; color: var(--muted); font-size: var(--fs-small); }
.mr-hb .mr-hb-v { text-align: end; font-weight: 700; font-size: var(--mr-fs-val); line-height: 1.4; }
.mr-hb .mr-hb-v small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
/* v7: one bar thickness in every card */
.mr-track { position: relative; height: var(--mr-bar-h); }
.mr-track > b { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; background: var(--chart-1); border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); min-width: 2px; }
.mr-track:hover > b { background: var(--chart-1-hi); }
.mr-track::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1px solid var(--chart-grid); }
.mr-track > i { position: absolute; inset-block: -6px; width: 0; border-inline-start: 2px dashed var(--chart-ref); }

/* payment mix: one stacked bar */
.mr-stack { display: flex; gap: 2px; height: 28px; margin-block: var(--space-1) var(--space-4); }
.mr-stack > span { display: block; min-width: 3px; height: 100%; }
.mr-stack > span:first-child { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
.mr-stack > span:last-child { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.mr-stack > span:hover { outline: 2px solid var(--text); outline-offset: -2px; }
.mr-pl { list-style: none; margin: 0; padding: 0; display: grid; }
.mr-pl > li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 4.5rem minmax(7rem, auto); align-items: center; gap: var(--space-3); min-height: 40px; }
.mr-pl > li + li { border-top: 1px solid var(--line); }
.mr-pl .sw { width: 12px; height: 12px; border-radius: var(--radius); }
.mr-pl .p { color: var(--muted); text-align: end; font-size: var(--fs-small); }
.mr-pl .v { text-align: end; font-weight: 700; font-size: var(--mr-fs-val); }

/* busiest hours: a heat strip */
.mr-heat { display: grid; grid-template-columns: repeat(var(--mr-cols, 12), minmax(0, 1fr)); gap: 2px; }
.mr-heat > span { height: 40px; border-radius: var(--radius); }
.mr-heat > span.is-pk { outline: 2px solid var(--text); outline-offset: 1px; }
.mr-heat-x { display: grid; grid-template-columns: repeat(var(--mr-cols, 12), minmax(0, 1fr)); gap: 2px; margin-top: var(--space-1); font-size: var(--fs-small); color: var(--chart-label); text-align: center; }
.mr-heat-x span { min-width: 0; }
.mr-heat-k { display: flex; align-items: center; gap: var(--space-1); }
.mr-heat-k i { width: 14px; height: 10px; border-radius: var(--radius); display: inline-block; }
.mr-heat-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); font-size: var(--fs-small); color: var(--muted); }
.mr-heat-top b { color: var(--text); }

/* sizes: sold and returned side by side, each on its own scale */
.mr-sz { display: grid; grid-template-columns: minmax(2.75rem, auto) minmax(0, 1fr) minmax(0, 1fr) minmax(3.5rem, auto); align-items: center; gap: var(--space-2) var(--space-3); }
.mr-sz .h { align-self: end; color: var(--chart-label); font-size: var(--fs-small); line-height: 1.3; }
.mr-sz .h.e, .mr-sz .e { text-align: end; }
.mr-sz .c { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mr-sz .c .mr-track { flex: 1 1 auto; min-width: 16px; }
.mr-sz .c > span:last-child { flex: none; min-width: 2.5rem; text-align: end; font-weight: 700; font-size: var(--mr-fs-val); }
.mr-sz .mr-track.is-ret > b { background: var(--chart-ref); }
.mr-sz .k { font-weight: 700; }
.mr-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); font-size: var(--fs-small); color: var(--muted); }
.mr-line b { color: var(--text); }
.mr-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.mr-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* the target */
.mr-target { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.mr-target-top, .mr-target-low { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mr-target-top span, .mr-target-low > span { color: var(--muted); font-size: var(--fs-small); }
.mr-target-low .mr-left { display: inline-flex; align-items: center; gap: var(--space-2); }
.mr-target-low .mr-left b { color: var(--text); }
.mr-target .progress-bar-wrapper { height: 8px; }

/* the card tools line (items or categories) */
.mr-tools { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.mr-tools label { color: var(--muted); font-size: var(--fs-small); }
.mr-tools select { width: auto; }

/* the month-close checks in a card and in the dialog */
.mr-checks { list-style: none; margin: 0; padding: 0; }
.mr-checks > li { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding-block: var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 3px solid transparent; }
.mr-checks > li + li { border-top: 1px solid var(--line); }
.mr-checks > li[data-tone="warn"] { border-inline-start-color: var(--warning); }
.mr-checks .mr-ck-t { flex: 1 1 auto; min-width: 0; }
.mr-checks .mr-ck-t small { display: block; color: var(--muted); font-size: var(--fs-small); }

/* v7: the tabs - long labels on a wide screen, short ones on a phone, where the three share the width equally */
.mr-tl-s { display: none; }
@media (max-width: 560px) {
  .tab-strip-rail .tab-btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding-inline: var(--space-2); }
  .mr-tl-l { display: none; }
  .mr-tl-s { display: inline; }
}

/* the bottom bar */
.mr-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-top: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.mr-bar-st { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 260px; min-height: 44px; padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--line-strong); }
.mr-bar-st[data-tone="warn"] { border-inline-start-color: var(--warning); }
.mr-bar-st[data-tone="ok"] { border-inline-start-color: var(--success); }
.mr-bar-st > .info-tip { margin-inline-start: auto; }
.mr-bar-tx { display: grid; min-width: 0; }
.mr-bar-t { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-weight: 700; }
.mr-bar-s { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--fs-small); }
.mr-bar-s b { color: var(--text); }
.mr-bar-a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mr-bar-a .btn-primary { min-width: 180px; }
/* the menu hangs from the bar itself, so it opens above it and stays on the screen */

.mr-modal-foot { justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.mr-modal-foot .mr-fa { display: flex; gap: var(--space-2); margin-inline-start: auto; flex-wrap: wrap; }
.mr-ck-st { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); min-width: 0; }
.mr-ck-p { padding: var(--space-2) 0 var(--space-3); display: grid; gap: var(--space-3); }
.mr-ck-p[hidden] { display: none; }
.mr-ck-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--fs-small); }
.mr-ck-rows li { display: flex; justify-content: space-between; gap: var(--space-3); }
.mr-ck-gap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--warning); background: var(--warning-tint); font-size: var(--fs-small); }
.mr-ck-btn { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.mr-ck-btn i { margin-inline-start: auto; color: var(--muted); transition: transform .2s; }
.mr-ck-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.mr-ck-note { color: var(--success); font-size: var(--fs-small); }
.mr-ck-note[hidden] { display: none; }
.mr-dlg-li { display: block !important; }
.mr-dlg-li .mr-ck-row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }


@media (max-width: 1100px) {
  .mr-grid, .mr-grid.is-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .mr-vd-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; row-gap: var(--space-5); }
  .mr-vd-col, .mr-vd-list { grid-row: auto; grid-template-rows: none; align-content: start; }
  .mr-vd-list > li { min-height: 56px; }
}
@media (max-width: 560px) {
  .mr-dy-k { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .mr-dy-k > div { padding: var(--space-2); }
}
@media (max-width: 560px) {
  .mr-card > .card-header { padding-block: var(--space-3); }
  .mr-card > .card-body { padding: var(--space-3); }
  .mr-verdict .mr-vd-t strong { font-size: var(--fs-heading, 1.7143rem); }
  .mr-viz { min-height: 240px; }
  .mr-row { min-height: 40px; padding-block: var(--space-1); }
  .mr-checks > li { min-height: 40px; padding-block: var(--space-1); }
  .mr-hb > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .mr-hb .mr-track { grid-column: 1 / -1; grid-row: 2; }
  .mr-pl > li { grid-template-columns: 12px minmax(0, 1fr) auto; row-gap: 0; padding-block: var(--space-2); }
  .mr-pl .p { grid-column: 2; grid-row: 2; text-align: start; }
  .mr-pl .v { grid-column: 3; grid-row: 1 / span 2; }
  .mr-heat > span { height: 32px; }
  .mr-heat-x span:nth-child(even) { visibility: hidden; }
  .mr-sz { gap: var(--space-2); }
  .mr-sz .h.e { max-width: 4.5rem; }
}
@media (max-width: 768px) {
  .kpi-grid.mr-kpis, .kpi-grid.mr-kpis.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--space-2); }
  .mr-kpis .kpi-card { padding: var(--space-3); }
  .mr-kpis .kpi-icon { display: none; }
  .mr-kpis .kpi-value { font-size: var(--fs-body-lg); margin: 0 0 var(--space-1); }
  .mr-kpis .mr-kpi-sub { margin-top: auto; padding-top: var(--space-2); }
  .mr-kpis .kpi-label .mr-kpi-x { flex-basis: 100%; }
  .mr-kpis .kpi-label .mr-kpi-x::before { content: none; }
  .mr-bar { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .mr-bar-st { flex: 1 1 auto; min-height: 40px; padding-inline-start: var(--space-2); }
  /* the coloured edge and the open/closed badge carry the state on a phone */
  .mr-bar-st > .info-tip, .mr-bar-s { display: none; }
  .mr-bar-tx, .mr-bar-t .badge { flex: none; }
  .mr-bar-tx { display: flex; align-items: center; gap: var(--space-2); }
  .mr-bar-t { flex-wrap: nowrap; white-space: nowrap; }
  .mr-bar-a { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; }
  .mr-kpis .kpi-card:has(> .info-tip) .kpi-value, .mr-kpis .kpi-card:has(> .info-tip) .kpi-label { max-width: calc(100% - var(--corner-i-size, 28px) - var(--space-2)); }
  .mr-bar-a .btn-primary { min-width: 0; }
  .mr-rs input { flex-basis: 100%; }
}
/* this page's own additions: a heat strip of any width, one column when nothing moved, the reason line, the ten-more button, the dialog foot */
.mr-vd-cols.is-one { grid-template-columns: minmax(0, 1fr); }
.mr-rs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mr-rs input { flex: 1 1 180px; min-width: 0; }
.mr-ck-reason { display: grid; gap: 2px; }
.mr-ck-reason small { color: var(--muted); font-size: var(--fs-small); }
.mr-more { display: flex; justify-content: center; padding-top: var(--space-3); }
.mr-dfoot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); width: 100%; }
.mr-dfoot .mr-fa { display: flex; gap: var(--space-2); margin-inline-start: auto; flex-wrap: wrap; }
.mr-dfoot .mr-ck-st { flex: 1 1 220px; }
.mr-page-root[aria-busy="true"] { opacity: .6; transition: opacity .15s; }

/* the Print button: the long label on a wide bar, the short one on a narrow bar */
.mr-pr-s { display: none; }
/* the print dialog and the preview of the paper in it (TASK-2026-181 slice 2C-b): the paper itself carries its own white and its own ink */
.mr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.mr-opt { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.mr-opt:has(input:checked) { border-color: var(--brand); background: var(--tint); }
.mr-opt input { margin-top: 3px; flex: none; width: auto; height: auto; }
.mr-opt b { display: block; }
.mr-opt small { display: block; color: var(--muted); font-size: var(--fs-small); }
.mr-prev { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: var(--space-4); background: var(--sunken); border-radius: var(--radius); max-height: 46vh; overflow: auto; }
.mr-roll { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); padding: 12px 0; width: 80mm; max-width: 100%; }
.mr-a4-fit { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-5); }
.mr-a4-z { width: 794px; }
@media (max-width: 640px) {
  .mr-pr-l { display: none; }
  .mr-pr-s { display: inline; }
  .mr-opts { grid-template-columns: minmax(0, 1fr); }
  .mr-a4-z { width: 794px; }
}