/* css/modules/comp.css: the .comp-* module — split out of css/app.css by #360's sibling stage (#362).
   Load order is core.css, then every modules/*.css alphabetically; rules here
   are in their original relative order, and no selector in this file appears in
   any other (asserted in tests/css-split-check.js). */

/* Fleet Composition (#/composition) sections flow as a masonry (CSS
   multi-column) so a short card (e.g. By depot, ~6 rows) sitting beside a tall
   one (By type, ~10 rows) can't hold a fixed two-column row open and leave a big
   vertical dead-space gap before the next section — see #130. Whole cards pack
   top-to-bottom then into the next column; break-inside:avoid keeps each intact
   and each is sized to its own content. Its own class on purpose — .rep-2
   (Reports) and .comp-grid (the compliance snapshot) are used by other screens
   and must not change. Collapses to one column on a phone at the shared 1100px
   breakpoint below. */
.comp-flow{columns:2;column-gap:18px}
.comp-flow>*{break-inside:avoid;margin:0 0 18px}
/* compliance snapshot */
.comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.comp-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.comp-row.is-ok{background:#f3faf5;border-color:#cfe9d8}
.comp-row.is-warn{background:#fff8ee;border-color:#f3dcb8}
.comp-row.is-bad{background:#fdf0ec;border-color:#f5cec1}
.comp-n{font-size:24px;font-weight:900;min-width:34px;text-align:center}
.comp-row.is-ok .comp-n{color:var(--ok)}
.comp-row.is-warn .comp-n{color:#c96a12}
.comp-row.is-bad .comp-n{color:var(--red)}
.comp-b b{display:block;font-size:13px}
.comp-b small{color:var(--muted);font-weight:700;font-size:11.5px}