/* Momentum's own looks (3.0, w9ignite). The screens are drawn from the kit's mo- section (components.css); this sheet only
   holds the pop-ups Momentum still builds itself — the confirm, Dashboards › Add widget and the Flags' thresholds — on the
   kit's fields and buttons inside the app's .modal, and the Backlog Tracker's month window (below). Every class here starts
   mom- so nothing on another screen can pick it up. */
/* Forecast › Backlog Tracker's month window (2.3.8's 320 fix, in 3.0): how many months, then ‹ This month ›, wrap as two
   whole pieces inside the tools bar — a phone never strands an arrow on a row of its own; at 320 the picker takes a row and
   the three buttons the next. */
.mom-win { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.mom-win-nav { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .mom-win { flex: 1 1 100%; }
  .mom-win > .select-wrap { flex: 1 1 auto; }
  .mom-win > .select-wrap .select { width: 100%; }
  .mom-win-nav { flex: 1 1 auto; }   /* at 320 ‹ This month › fills the row under the picker (design review) */
  .mom-win-nav > .btn.secondary { flex: 1 1 auto; }
}
/* Hours & Costs › Billable › By person (213, 214): the figure columns keep a short, shared width at the right of the row, so Days, Hours
   and Cost headers sit over their numbers instead of drifting to the quarter points of a 1,400px table */
.mo-fig th.r, .mo-fig td.r { width: 130px; }
/* Purchasing's page-head actions sit at the right of the head like every other screen's, whether beside the lede or wrapped under it (231, 232) */
.mo.pu > .page-head > .actions { margin-left: auto; justify-content: flex-end; }
/* a list panel's heading is followed straight by its table, not by a 40px gap (213, 214) */
.mo .phone-cards > .pad.mo-top { padding-bottom: 6px; }
/* a dashboard's only widget fills the row, not two thirds of it with an empty third beside it (w30a, 237) */
.mo-widgets > .mo-widget.mo-wide:only-child { grid-column: 1 / -1; }
/* …and its chart does not grow with the row: the drawing scales by its width, so across 1,400px the axis text came out twice its
   size and the chart 460px tall. The chart stops at 300px (the drawing centres in the room, text at most 1.5 times its size) (w32fix) */
.mo-widgets > .mo-widget.mo-wide:only-child .viz-svg { max-height: 300px; }
/* Forecast grid's toolbar (w30a, 046): Plan & pace, Budgets, CSV and Print travel as one group, so CSV / Print are never left alone
   on a row; the group sits at the right of its row, and under the search on a phone. The Backlog Tracker's window picker keeps its
   arrows beside "This month" (346). */
.fc-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-left: auto; }
.mom-win-nav { flex-wrap: nowrap; }
@media (max-width: 640px) { .fc-acts { flex: 1 1 100%; } .fc-acts > .btn { flex: 1 1 0; justify-content: center; } }
/* Forecast › Plan & pace › Branches vs Budget (2.3.8 in 3.0): a .phone-cards panel whose table turns to a card per branch
   below 768, not only at 640 — six money columns do not fit a 641–767 window, and the stacked table ran 1782px tall there
   (design review). The table never scrolls sideways, so its first column needs no sticky white backing; its five figure
   columns keep one width so they stay put when another month is picked; the phone's month dropdown is full width. */
.mom-gap table.t th.r { width: 16%; }
.mom-gap .mo-wide-t :is(th, td):first-child { position: static; background: none; }
/* Forecast › Backlog Tracker's toolbar on a phone: + Project and + Customer take half a row each and "Paste from Excel" the
   whole row under them, so it is never left alone on a row of its own beside nothing (w27a's design review). */
@media (max-width: 640px) {
  .wg-tools > [data-fc="tr-add"] { flex: 1 1 calc(50% - 5px); }
  .wg-tools > [data-fc="tr-paste"] { flex: 1 1 100%; }
}
/* Forecast › Plan & pace › Month by month: the panel sits under .fc-plan, not .mo, so the kit's backing for a wide table
   (a surface behind the whole table, which the first column's sticky surface then matches) never reached it, and the
   column read as a white block beside a tinted panel at 641–1180 (w27a's design review). */
@media (max-width: 1180px) {
  .fc-plan .table-wrap:has(> .mo-wide-t) { background: var(--surface); border-radius: var(--r-m); }
}
@media (max-width: 767px) {
  .phone-cards.mom-gap table.t { display: none; }
  .phone-cards.mom-gap .cards { display: flex; flex-direction: column; gap: 8px; }
}
@media (max-width: 640px) { .mom-gap .mo-segsel-pick { flex: 1 1 100%; } }
.mom-modal { display: grid; gap: 12px; min-width: 0; }
.mom-modal h2 { margin: 0; font-size: var(--fs-xl); }
.mom-modal p { margin: 0; }
.mom-modal .field { margin-bottom: 0; min-width: 0; }   /* 2.x gives every .field a bottom margin; the grids space these */
.mom-modal .field label .hint, .mom-cfh .hint { font-weight: var(--fw-med); }
.mom-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.mom-form:empty { display: none; }
.mom-form .wide { grid-column: 1 / -1; }
.mom-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.modal:has(> .mom-mfl) { max-width: 560px; }
/* Add widget › Chart › Filters: a field, its values, remove — one row each */
.mom-cfh { font-size: 12px; font-weight: var(--fw-semi); color: var(--ink-2); }
.mom-cfs { display: grid; gap: 6px; }
.mom-cfs:empty { display: none; }
.mom-cf { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
@media (max-width: 1180px), (pointer: coarse) { .mom-cf .btn.icon { width: var(--tap); } }
@media (max-width: 640px) {
  .mom-form { grid-template-columns: minmax(0, 1fr); }
  .mom-acts .btn { flex: 1 1 0; justify-content: center; }
  .mom-cf { grid-template-columns: minmax(0, 1fr) auto; }
  .mom-cf .select-wrap { grid-column: 1 / -1; }
}
/* the period bar (moPeriodBar): This month … Year to date, Custom — eight choices run past an iPad's column (820 px: 795 px
   of strip in 788), and Spanish is wider still, so on every touch width it is the dropdown the kit gives a phone */
@media (max-width: 1180px) {
  .mom-period .mo-segsel > .seg { display: none; }
  .mom-period .mo-segsel-pick { display: flex; flex: 0 1 260px; min-width: 0; }
  .mom-period .mo-segsel-pick .select { width: 100%; }
  .mo-tools > .mom-period { flex: 1 1 100%; }   /* the bar takes its row, so Custom's two dates and Run sit beside the pick */
}
@media (max-width: 640px) { .mom-period .mo-segsel-pick { flex: 1 1 100%; } }
/* phone leftovers (w30a): the period bar's Run takes the row under the two dates, not a small button alone (063, 206); a toolbar's
   CSV / action row is a full row under its strip (297, 046, 346) */
@media (max-width: 640px) {
  .mo .page-head > .actions > .select-wrap { flex: 1 1 100%; }   /* a head's picker is as wide as the head's buttons are (206) */
  .mo-period > .btn { flex: 1 1 100%; justify-content: center; }
  .mo-tools > .mo-acts { flex: 1 1 100%; }
  .mo-tools > .mo-acts > .btn { flex: 1 1 0; justify-content: center; }
}
/* Pipeline › Accounts (B21): the branch rides under the BDM on one line, so every row is the same two lines; up to 1280 px
   the last visit folds under the visit count and an account's note is shorter, so the nine figures fit an iPad or a 1024
   window without the table running sideways */
.mom-pn-br { white-space: nowrap; }
.mom-pn-lvin { display: none; }
@media (max-width: 1280px) {
  .pn-t .mom-pn-lv { display: none; }
  .pn-t .mom-pn-lvin { display: block; }
  .pn-t .pn-note { max-width: 200px; }
  .pn-t .pn-name { min-width: 160px; max-width: 220px; }
}
/* …and on an iPad held upright (981 px and under) the accounts are the phone's cards, one under another, rather than a
   table that would still run sideways — the way the kit's busy Settings lists turn to cards at 980 */
@media (max-width: 980px) {
  .pn-list table.t { display: none; }
  .pn-list .cards { display: flex !important; flex-direction: column; gap: 8px; }
}
/* touch reach, the Momentum leftovers (w15polish's list, re-measured at 375 as an iPhone): each control a fingertip presses
   reaches 44px without moving its neighbours' reach onto it */
@media (max-width: 1180px), (pointer: coarse) {
  /* source links stacked in a panel's corner — Overview's Labor & overhead, Backlog Tracker's "Its rows" — were 4px apart, so
     each one's reach landed on the next: each is its own 44px row (w15polish "source-link stacks 4px apart") */
  .mo-acts > a.src, .mo-chips > a.src { min-height: var(--tap); }
  /* a year on Budgets › Revenue targets ("2027", 31 across): 44 across as well as tall */
  .bu-tools .hint a::before { inset: min(0px, calc(50% - var(--tap) / 2)) min(-4px, calc(50% - var(--tap) / 2)); }
  /* the forecast grid's "$0" in the total column (16 across) */
  .wg td.tot .wg-drill::before { inset: min(0px, calc(50% - var(--tap) / 2)) min(0px, calc(50% - var(--tap) / 2)); }
  /* Customer Portal's phone card: the name, its BDM, the link and the projects sat 0px apart, so their reaches overlapped */
  .phone-cards .cpl-card { display: grid; gap: 12px; }
  /* a row that holds a link or a figure to press is a fingertip tall (an iPad's tables ran 40px rows: a branch, a customer,
     a person, a drill reached only 40) */
  .mo table.t tbody td { height: var(--tap); }
  .mo .mo-people { row-gap: 18px; }   /* Reports › Labor's rework crew: two faces on two lines sat 4px apart (26 reach each) */
  .mo .mo-people > a { min-height: 26px; }
}
/* NexTraq's tables (w21nx): Hours & Costs › Trucks' By branch, and the Overview's Idle this month (design review 10/27) */
@media (max-width: 1180px), (pointer: coarse) {
  .mo-nx-t td:last-child > .mo-n::after { inset-inline-end: max(-12px, min(0px, calc(50% - var(--tap) / 2))); }   /* a short figure in the last column reached 2px past its cell: the table scrolled sideways */
}
@media (max-width: 400px) { table.t.mo-idle-t :is(th, td) { padding-inline: 8px; } }   /* at 320 the idle table was 27px wider than its panel */
/* a finger at any width (w22touch, 10/27): Reports › Approval matrix — a bid's "who signs" cell lists one role a line, and a
   role nobody holds says so with a source link ("nobody assigned — assign one"); the lines sat 37px apart, so each link's
   reach met the next one's (38): each such line is a fingertip tall */
@media (pointer: coarse) { .mo td > div.hint:has(> .src) { min-height: var(--tap); } }
/* Customer Portal's phone card on touch (w23touch, 10/27): its BDM's name, the link and the projects under it each have a
   fingertip's room — at 12px apart the BDM reached 32 and the link 37. The projects' own 13px under them already keeps the
   buttons clear */
@media (pointer: coarse) {
  .phone-cards .cpl-card > div:first-child { margin-bottom: 12px; }
  .phone-cards .cpl-card > div:nth-child(2) { margin-bottom: 8px; }
}

/* Reports › Revenue & Backlog (2.4.0): a heading over each figure strip and its chart. .mo is a 16px-gap column, so the
   heading's own margins come off it — 22px above and 10px below, the platform's heading rhythm. */
.mo > h2.mo-h { margin: 6px 0 -6px; }
/* a read-only dashboard with nothing on it says who can fill it, across the whole grid (2.4.0) */
.mo-widgets > .mo-widget-none { grid-column: 1 / -1; }
/* wide widgets (built charts, the Revenue & Backlog charts) two in a row each take the row, and under 1180 a narrow widget left
   after a wide one takes the row too: no lone widget with an empty slot beside it (design review, w27b) */
.mo-widgets > .mo-widget.mo-wide:has(+ .mo-widget.mo-wide) { grid-column: 1 / -1; }
@media (max-width: 1180px) { .mo-widgets > .mo-widget.mo-wide + .mo-widget:not(.mo-wide):is(:last-child, :has(+ .mo-widget-add)) { grid-column: 1 / -1; } }
/* Revenue & Backlog: two charts side by side start their plots level when a subtitle wraps; a strip's lines sit level */
.mo-rb .grid-2 > .mo-chart .mo-top { min-height: 61px; }
.mo-rb .strip .hint { margin-top: 0; }
/* A custom dashboard's Stat and Table widgets open their rows (the drill rule): the circle sits one even step after the
   figure or the period line, whatever the figure ends in ("83%" has no trailing space the way "$1,414,380.84" did). */
.mo-widget .value .drill, .mo-widget .hint .drill { margin-inline-start: 10px; vertical-align: middle; }

/* Forecast grid (w53c, Jordan's w51-forecast-split): a split job's project row stays where it is edited, and a read-only SHARE row sits
   under each revenue branch. The tag in the row's second line says which; by branch the project row's figures are quiet because its
   shares, not it, are what the branch adds up. */
.mom-tag { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; background: var(--info-bg); color: var(--info); vertical-align: 1px; }
.mom-tag.whole { background: var(--hair-2); color: var(--ink-2); }
.wg-t tr.share .wg-act { color: var(--ink-2); }
.wg-t tr.whole td .wg-act, .wg-t tr.whole td .wg-in, .wg-t tr.whole td .wg-drill, .wg-t tr.whole .rem { color: var(--muted); }
/* On a phone the row's second line is hidden to keep the rows short; a share or the project row of a split job keeps just its tag, so the
   rows under one name can still be told apart (the line's data, who and where, stays hidden as on every other row). */
@media (max-width: 640px) {
  .wg-t .wg-meta:has(.mom-tag) { display: block; }
  .wg-t .wg-meta:has(.mom-tag) > span { display: none; }
}