/* The page container, the breadcrumb, tables, the stop record, the map, Move-in and the customer's own page
   (docs/UI-CLEAN.md O3, O5, O19-O21, O24, O30, O31). Loads after pages-ops.css. */

/* ---------- one page container (O5): one width, one gutter (.main's), prose capped near 65 characters ---------- */
.page { max-width: 1280px; margin: 0 auto; }
.page :is(p, .sub):not(.t *, .kpi *, .sheet *, .chat *) { max-width: 65ch; }

/* ---------- the stop record (O19) ---------- */
/* on screen the sheet's rules are hairlines; printing keeps the heavy ones */
.sheet-head { border-bottom: 1px solid var(--line-strong); }
@media print {
  .sheet-head { border-bottom: 2px solid var(--ink); }
}

/* ---------- tables (O24): the base is styles.css (40px rows, a 32px head); links plain until the mouse is on them ---------- */
.t.compact td { height: auto; }
.t td a:not(.btn), .t th a:not(.btn) { text-decoration: none; }
@media (hover: hover) { .t td a:not(.btn):hover, .t th a:not(.btn):hover { text-decoration: underline; } }
.t th.n, .t td.n { text-align: right; font-weight: inherit; }
/* a "..." in the last cell sits flush right */
.t td.right .row-menu { display: block; margin-left: auto; width: max-content; }
.more-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }

/* ---------- the day on a map fills the page (O20): the techs are a list laid over it ---------- */


/* ---------- a stop with no readable time sits at the start of its tech's row (M1) ---------- */

/* ---------- a long unbroken name wraps in its cell instead of widening the table (M6) ---------- */
/* break-word, not anywhere: anywhere also shrinks a column's narrowest width, and with the assistant open the table
   squeezed "Rodent bait station service" down to a letter a line */
.t td:not(.nowrap), .t th:not(.nowrap) { overflow-wrap: break-word; }

/* ---------- phone width: fingers, selects, the invoice bar ---------- */
.field .select, .form-grid .select { width: 100%; }
@media (max-width: 720px) {
}
/* two-step sign-in (views/two-step.js): the steps, the key in groups of four, the 6-digit box */
.two-step { display: grid; gap: 12px; }
.two-step-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-2); }
.code-box .code.key { font: var(--w-semi) var(--fs-m)/1.35 var(--mono); letter-spacing: 0.06em; word-break: break-word; }
.code-input { max-width: 12ch; font: var(--w-semibold) 22px/1 var(--mono); letter-spacing: 0.3em; }