/* Port lane W2 (docs/SPEC-port-2026-09-23.md). This lane owns this file alone;
   app.css stays untouched while the port runs. Tokens only from app.css/themes.css. */

/* -----------------------------------------------------------------------
 * F1 — the shell: the Practice tag, the Home tab dot
 * --------------------------------------------------------------------- */

/* THE PRACTICE TAG (shell-header.js) — one small sign in the brand bar,
 * replacing the full-width band this app never actually built. Same fixed
 * amber the native tag uses (Tradescom/Features/Shell/BrandBar.swift), not a
 * themed token: it must not blend into any look, light or dark.
 * standards:ok fixed practice colour, same reasoning as the native tag —
 * it must not blend into a themed look. */
.brand-practice-tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: var(--space-6, 24px);
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: #f59e0b;
  color: #000;
  font-size: var(--text-caption, 12px);
  font-weight: var(--w-bold, 700);
  white-space: nowrap;
  cursor: default;
}

/* THE HOME TAB DOT (nav.js) — a dot, never a number
 * (docs/SPEC-top-stack-2026-09-23.md §1). Sits on the label's corner, same
 * idea as a tab badge, without claiming a count it cannot show honestly. */
.bottombar .bb-item {
  position: relative;
}
.bb-dot {
  position: absolute;
  top: 2px;
  right: calc(50% - 18px);
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--bad, var(--money-late));
}

/* -----------------------------------------------------------------------
 * F2 — Office Home: the screen line, the needs hero + chips + rows,
 * the Today summary + mini lanes, the one money line
 * --------------------------------------------------------------------- */

.hm-screenline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.hm-screenline-date {
  font-size: var(--text-heading, 20px);
  font-weight: var(--w-bold, 700);
  color: var(--ink);
}
.hm-screenline-book {
  flex: 0 0 auto;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
}

/* The needs hero — one line, the count and a door to the whole pile. No
 * sentence underneath repeating the number in words (design-standard: a
 * count with no reachable list is the bug; a count said twice is the other
 * one). */
.hm-needs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-min);
}
.hm-needs-hero-count {
  font-size: var(--text-heading, 20px);
  font-weight: var(--w-bold, 700);
  color: var(--ink);
}
.hm-needs-hero-seeall {
  flex: 0 0 auto;
  font-weight: var(--w-bold, 700);
}

/* A FIXED 2x2 GRID, NEVER A HORIZONTAL SCROLL — the exact defect a scrolling
 * chip row cannot avoid (the fourth chip sitting half off the phone at rest).
 * Two flexible columns, so 1-4 chips always lay out with nothing cut off and
 * nothing to swipe to find. */
.hm-chips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.hm-chips-grid .chip.hm-chip {
  flex: none;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The worst three (or the filtered set) — count tile, words, chevron. */
.hm-need-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.hm-need-row.row-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-primary, 56px);
}
.hm-need-row-count {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-8, 32px);
  min-height: var(--space-8, 32px);
  border-radius: var(--radius-sm);
  background: var(--attention-soft, var(--card-2));
  color: var(--attention, var(--ink));
  font-weight: var(--w-bold, 700);
  font-variant-numeric: tabular-nums;
}
.hm-need-row-count.is-zero {
  background: var(--card-2);
  color: var(--muted);
}
.hm-need-row-words {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.hm-need-row-words .ts-row-title,
.hm-need-row-words .ts-row-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Today — one summary line, then a mini lane per tech. The full per-stop
 * board is one tap away ("Open the day board"); this is the glance. */
.hm-today-summary {
  font-weight: var(--w-bold, 700);
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.hm-today-lanes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-3);
}
.hm-today-lane {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.hm-today-lane:active {
  background: var(--card-2);
}
.hm-today-lane-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.hm-today-lane.is-unassigned .hm-today-lane-dot {
  background: var(--attention, var(--money-due));
}
.hm-today-lane-name {
  flex: 0 0 64px;
  font-weight: var(--w-bold, 700);
  font-size: var(--text-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-today-lane.is-unassigned .hm-today-lane-name {
  color: var(--attention, var(--money-due));
}
.hm-today-lane-bar {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.hm-today-seg {
  flex: 0 0 auto;
  width: 7px;
  height: 14px;
  border-radius: 2px;
  background: var(--line);
}
.hm-today-seg-done { background: var(--tone-done-edge, var(--money)); }
.hm-today-seg-live { background: var(--tone-live-edge, var(--accent)); }
.hm-today-seg-late { background: var(--tone-late-edge, var(--bad)); }
.hm-today-seg-warn { background: var(--tone-soon-edge, var(--attention)); }
.hm-today-seg-plan { background: var(--line); }
.hm-today-lane-overflow {
  flex: 0 0 auto;
  margin-left: 2px;
}
.hm-today-lane-count {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

/* Money — one line, one door. Runway and payroll stay on the money book. */
.hm-money-line.row-button {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-height: var(--tap-primary, 56px);
}
.hm-money-line-owed,
.hm-money-line-in {
  font-variant-numeric: tabular-nums;
}
.hm-notice {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption, 13px);
}
.hm-notice-late {
  background: var(--bad-soft, var(--card-2));
  color: var(--bad, var(--ink));
}

/* -----------------------------------------------------------------------
 * F3 — Needs you: the chip row, the "+ To-do" write, the folded (x2) row
 * --------------------------------------------------------------------- */

.nm-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  margin: var(--space-2) 0 var(--space-3);
}
.nm-chips .chip.nm-chip {
  flex: 0 0 auto;
  padding: 0 var(--space-4);
  white-space: nowrap;
}
.nm-add-todo {
  margin-bottom: var(--space-3);
}
.nm-add-todo-input {
  width: 100%;
  margin: var(--space-2) 0;
}
.nm-add-todo-actions {
  display: flex;
  gap: var(--space-2);
}
.nm-add-todo-open {
  flex: 0 0 auto;
  margin-left: auto;
}
.nm-mark-read {
  display: block;
  margin: var(--space-2) 0;
}

/* -----------------------------------------------------------------------
 * Home "Performance" numbers — Zach 2026-09-23 ("more analytics, like jobs
 * this week / month, estimates"), shaped by Cole 2026-09-23 to match
 * Square's own Home "Performance" card: a title, a period switch, one
 * headline number with a small change pill, a day-by-day bar strip, then a
 * 2-column grid of the rest, each with its own small pill. White card, one
 * type scale, colour ONLY on the change arrow. Backs `web/src/home-numbers.js`
 * — self-contained on purpose, so this section can move wholesale into a
 * future whole-Home layout without carrying anything else along.
 * --------------------------------------------------------------------- */

.hmnum-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.hmnum-title {
  font-size: var(--text-heading);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin: 0;
}
.hmnum-pills {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.hmnum-switch {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  padding: 2px;
}
.hmnum-switch-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  min-height: 0;
}
.hmnum-switch-btn.on {
  background: var(--card);
  color: var(--ink);
  font-weight: var(--w-semi);
  box-shadow: var(--elev-1);
}
.hmnum-vs {
  font-size: var(--text-caption);
  color: var(--muted);
}
.hmnum-notice {
  margin: var(--space-2) 0 0;
}

.hmnum-headline {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--space-4);
}
.hmnum-headline-label {
  display: block;
  font-size: var(--text-caption);
  color: var(--muted);
  margin-bottom: 2px;
}
.hmnum-headline-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.hmnum-headline-value {
  font-size: var(--text-money-lg);
  font-weight: var(--w-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The one place this card uses colour — the arrow, never the pill. */
.hmnum-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.hmnum-pill-flat {
  color: var(--muted);
}
.hmnum-arrow-up {
  color: var(--money);
}
.hmnum-arrow-down {
  color: var(--bad);
}

.hmnum-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
  margin-bottom: var(--space-4);
  padding-top: var(--space-2);
}
.hmnum-bar-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 4px;
  min-width: 3px;
}
.hmnum-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  background: var(--accent, #2563eb);
  opacity: 0.35;
}
.hmnum-bar-today {
  opacity: 1;
}
.hmnum-bar-label {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.hmnum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.hmnum-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line);
  text-align: left;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  min-height: 0;
}
button.hmnum-tile-tap {
  cursor: pointer;
}
.hmnum-tile-label {
  font-size: var(--text-caption);
  color: var(--muted);
}
.hmnum-tile-value {
  font-size: var(--text-heading);
  font-weight: var(--w-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Profit beside Collected (migration 500, Zach 2026-09-23: "profit with job
 * costing as a comparative"). Two headline numbers side by side, split by a
 * thin rule; they stack on a narrow phone. Still no colour but the arrow —
 * a loss is the one exception, because a negative profit must not read as
 * a good number at a glance. */
.hmnum-headline-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.hmnum-headline-pair > .hmnum-headline {
  margin-bottom: 0;
  min-width: 0;
}
.hmnum-headline-profit {
  border-left: 1px solid var(--line);
  padding-left: var(--space-4);
}
.hmnum-margin {
  white-space: nowrap;
}
/* A change pill is as wide as its words, never the whole tile. */
.hmnum-tile > .hmnum-pill {
  align-self: flex-start;
}
.hmnum-loss {
  color: var(--bad);
}
@media (max-width: 420px) {
  .hmnum-headline-pair {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .hmnum-headline-profit {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
  }
}

.hmnum-tile-wide {
  grid-column: 1 / -1;
}
.hmnum-costs-split {
  font-size: var(--text-caption);
  color: var(--muted);
}
.hmnum-arrow-flat {
  color: var(--muted);
}

/* "Costs missing on N jobs" — plain grey, not a banner. Opens in place. */
.hmnum-missing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-3);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-caption);
  min-height: 0;
  cursor: pointer;
  text-align: left;
}
.hmnum-missing:hover {
  color: var(--ink);
}
.hmnum-missing-chev {
  font-size: 10px;
}
.hmnum-missing-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
}
.hmnum-missing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border: none;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-size: var(--text-caption);
  min-height: 0;
  cursor: pointer;
  width: 100%;
}
div.hmnum-missing-row {
  cursor: default;
}
.hmnum-missing-who {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hmnum-missing-what {
  color: var(--muted);
  white-space: nowrap;
}
.hmnum-missing-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* Profit sub-line: what the profit was earned on (Zach 2026-09-23). */
.hmnum-profit-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* Zach 2026-09-23 12:19: "I don't like these little text box looking things."
   On Home, a row you can tap is a plain list row (text, a thin divider, a
   chevron), never a filled grey box. */
main.hm .row-button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 28px 0 2px;
  min-height: 52px;
  position: relative;
  font-size: 16px;
}
main.hm .row-button:last-child { border-bottom: 0; }
main.hm .row-button::after {
  content: '›';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 20px;
}
main.hm .row-button:hover { background: var(--card-2); }

/* "Where leads come from" (migration 518, Zach 2026-09-23 ~13:55 CT: "where
 * leads are coming from vs spend on my home page, and CAC"). Plain rows with
 * thin dividers, no filled boxes, no chips. Numbers right-aligned in fixed
 * columns so they line up down the card; what nobody entered is grey. */
.hmmkt-budget {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body, 15px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hmmkt-table {
  display: flex;
  flex-direction: column;
}
.hmmkt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 78px 64px 38px 60px;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
  min-height: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.hmmkt-colhead {
  border-top: none;
  padding-top: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}
button.hmmkt-tap {
  cursor: pointer;
}
button.hmmkt-tap:hover {
  background: var(--card-2);
}
.hmmkt-total {
  font-weight: var(--w-semi);
}
.hmmkt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hmmkt-num {
  text-align: right;
  white-space: nowrap;
}
.hmmkt-grey {
  color: var(--muted);
  font-weight: normal;
}
.hmmkt-num .hmmkt-grey {
  font-size: 12px;
}
.hmmkt-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--muted);
}
@media (max-width: 420px) {
  .hmmkt-row {
    grid-template-columns: minmax(0, 1fr) 34px 66px 52px 30px 50px;
    gap: 6px;
    font-size: 13px;
  }
  .hmmkt-num .hmmkt-grey {
    font-size: 11px;
  }
}

/* Home's "Techs" card (home-techs.js, migration 562, Zach 2026-09-23: "for
 * home I also want to see tech statistics"). One plain row per tech, same
 * white-card/no-colour-except-the-arrow language as the Performance and
 * "Where leads come from" cards above it. 44px minimum so a row is a real
 * tap, not a graze. */
.hmtech-table {
  display: flex;
  flex-direction: column;
}
.hmtech-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  color: var(--ink);
}
.hmtech-table .hmtech-row:first-child {
  border-top: none;
}
button.hmtech-tap {
  cursor: pointer;
}
button.hmtech-tap:hover {
  background: var(--card-2);
}
.hmtech-who {
  min-width: 0;
  flex: 1 1 auto;
}
.hmtech-name {
  font-weight: var(--w-semi);
  font-size: 15px;
}
.hmtech-role,
.hmtech-folded {
  font-size: var(--text-caption);
  color: var(--muted);
}
.hmtech-nums {
  flex: 0 0 auto;
  text-align: right;
}
.hmtech-billed-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.hmtech-billed {
  font-weight: var(--w-bold);
  font-size: 16px;
  color: var(--ink);
}
.hmtech-meta {
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: normal;
}
.hmtech-delta {
  font-size: var(--text-caption);
  color: var(--muted);
  white-space: nowrap;
}
.hmtech-delta-flat {
  color: var(--muted);
}
@media (max-width: 420px) {
  .hmtech-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .hmtech-nums {
    text-align: left;
    width: 100%;
  }
  .hmtech-billed-row {
    justify-content: flex-start;
  }
}

/* Pipeline leads narrowed to one source from Home (518): one grey line with
 * the way back out, not a banner. */
.pl-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.pl-filter-clear {
  min-height: 0;
  padding: 0;
}