/* port-w12.css — `docs/SPEC-unbury-2026-09-23.md`, the web lane (B1-B5, N1-N5,
 * M1-M15, T1-T4). Loaded after `app.css` and every other `port-w*.css`
 * (`index.html`, `sw.js` SHELL) — nothing here redefines a token, it only
 * adds the handful of classes this pass' new screens need. Row look matches
 * `.ts-row` (Home, Schedule, Waiting on you) everywhere it can; new rules are
 * only for the things nothing already had a name for: the raised +'s own
 * sheet, and the menu's compact "who" line.
 */

/* ---------------------------------------------------------------------------
 * The header's menu button (B4) — three lines, last in the row.
 * ------------------------------------------------------------------------- */
.icon.menu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
 * N1-N5 — the + sheet and its pickers (Take a payment / Send a bill / Add a
 * to-do), and M8's "Scorecards" chooser. One overlay shape, bottom-anchored,
 * same as a native action sheet — `oncall.js`'s own overlay is centred, not
 * bottom-anchored, so this is a new (small) shape rather than a reuse.
 * ------------------------------------------------------------------------- */
.plus-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--scrim);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.plus-sheet-panel {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-3) var(--space-4) var(--space-6);
  box-shadow: var(--elev-3);
}

.plus-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--line);
  margin: 0 auto var(--space-4);
}

.plus-sheet-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-heading);
}

/* "Book a job" — the one big button, unchanged behaviour, just moved inside
 * the sheet. Two lines: a bold title and a quieter sub-line under it, same
 * two-tier text every row on this sheet uses. */
.plus-sheet-book {
  width: 100%;
  min-height: var(--tap-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  text-align: center;
}
.plus-sheet-book-title {
  font-size: var(--text-body);
  font-weight: var(--w-semi);
}
.plus-sheet-book-sub {
  font-size: var(--text-caption);
  opacity: 0.85;
}

.plus-sheet-rows {
  padding: 0;
  overflow: hidden;
}
.plus-sheet-rows .plus-row {
  width: 100%;
  text-align: left;
  border-radius: 0;
}
.plus-sheet-rows .plus-row + .plus-row {
  border-top: 1px solid var(--line);
}

.plus-sheet-cancel {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--space-4);
  min-height: var(--tap-min);
}

/* ---------------------------------------------------------------------------
 * M14 — the menu's compact "who" line: "Name · Company · Switch · Sign out".
 * Replaces the two standing-fact cards that used to sit at the BOTTOM of
 * this screen; this sits at the top instead, one line tall.
 * ------------------------------------------------------------------------- */
.menu-who-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  padding: 0 var(--space-1) var(--space-3);
  font-size: var(--text-label);
  color: var(--ink-2);
}
.menu-who-sep {
  color: var(--ink-2);
  opacity: 0.6;
}
.menu-who-action {
  min-height: 0;
  padding: 0;
  font-size: var(--text-label);
}
.menu-who-switch {
  display: block;
  margin: 0 0 var(--space-3) var(--space-1);
  min-height: 0;
  padding: 0;
  font-size: var(--text-caption);
}

/* The plain footer a field login keeps (Sign out · version), and the
 * version-only line office gets now that Sign out moved to the top line. */
.menu-foot {
  text-align: center;
  padding: var(--space-4) 0 var(--space-2);
}

/* A header with a named Back button ("‹ Search") plus the title plus four
 * icons overflowed 390px and wrapped the icons onto a second line (menu
 * screen, 2026-09-24). Keep it one line: the title gives way first. */
header.top:has(.nav-back) { flex-wrap: nowrap; }
header.top:has(.nav-back) .top-left { min-width: 0; flex: 1 1 0; }
header.top:has(.nav-back) .nav-back { max-width: 40%; flex: 0 1 auto; min-width: 0; }