/* Record tabs: site and customer record pages (records-site.js, records-customer.js).
   Ported from the approved mockup frames f4 (site) and f7 (customer): v2/src/records.css (.rhead, .rbody, .sec,
   .sh, .bi, .utabs, table.ht, .phgrid, .ctc, dl.kv, .grp, table.st7) + screens.css (.select, .input).
   Loads after design-tokens.css, records-tokens.css and records-base.css; primitives (rt-st, rt-pill, rt-code,
   rt-av, rt-caps, rt-kk, rt-link, rt-ico, rt-btn) come from records-base.css and are not restyled here.
   Every rule is scoped under .rt; values only through var(--ds-*) / var(--rt-*). Desktop only (>= 1233 px). */

.rt.rt-pg { background: var(--ds-canvas); color: var(--ds-ink); font-size: var(--ds-text-base); line-height: var(--ds-lh-base); letter-spacing: var(--ds-track-base); min-width: var(--ds-page-min); }
.rt .rt-pg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── header ─────────────────────────────────────────────────────────── */
.rt .rt-pg-head { background: var(--ds-canvas); box-shadow: inset 0 -1px 0 var(--ds-line); padding: var(--ds-s-5) var(--ds-gutter); display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: var(--ds-s-6); align-items: end; }
.rt .rt-pg-hl { min-width: 0; }
.rt .rt-pg-crumb { font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-3); display: flex; align-items: center; gap: 6px; }
.rt .rt-pg-crumb .rt-ico { width: 12px; height: 12px; stroke-width: 2; color: var(--ds-icon); }
.rt .rt-pg-l1 { display: flex; align-items: center; gap: var(--ds-s-3); margin-top: var(--ds-s-1); min-width: 0; }
.rt .rt-pg-title { margin: 0; font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-track); font-size: var(--ds-text-d1); line-height: var(--ds-lh-d1); color: var(--ds-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rt .rt-pg-l1 .rt-pill { flex: none; }
.rt .rt-pg-l2 { margin-top: var(--ds-s-2); display: flex; align-items: center; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; }
.rt .rt-pg-l2 b { color: var(--ds-ink); font-weight: var(--ds-w-medium); }
.rt .rt-pg-sep { color: var(--ds-icon); margin: 0 6px; }
.rt .rt-pg-custlink { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-ink-2); }
.rt .rt-pg-custlink .rt-ico { color: var(--ds-icon); }
.rt .rt-pg-custlink .rt-pg-ul { text-decoration: underline; text-decoration-color: var(--ds-field); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rt .rt-pg-pn { font-variant-numeric: var(--ds-nums); }
.rt .rt-pg-acts { display: flex; align-items: center; gap: var(--ds-s-2); }
.rt .rt-pg-acts > * { flex: none; }
.rt .rt-pg-acts a.rt-btn { text-decoration: none; }
.rt .rt-pg-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--ds-r-sm); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); font-weight: var(--ds-w-medium); color: var(--ds-ink-2); background: var(--ds-tint); white-space: nowrap; }
.rt .rt-pg-l1 .rt-pg-tag { height: var(--ds-pill-h); padding: 0 var(--ds-s-2); flex: none; }

/* ── body grid: main column + 360 px rail; equipment runs full width below both ── */
.rt .rt-pg-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; }
.rt .rt-pg-main { padding: 0 var(--ds-s-6) var(--ds-s-8) var(--ds-gutter); min-width: 0; }
.rt .rt-pg-rail { padding: 0 var(--ds-gutter) var(--ds-s-8) var(--ds-s-6); box-shadow: inset 1px 0 0 var(--ds-line); min-width: 0; }
.rt .rt-pg-full { grid-column: 1 / -1; padding: 0 var(--ds-gutter) var(--ds-s-8); box-shadow: inset 0 1px 0 var(--ds-line); min-width: 0; }

/* ── sections ───────────────────────────────────────────────────────── */
.rt .rt-pg-sec { padding-bottom: var(--ds-s-4); }
.rt .rt-pg-sec + .rt-pg-sec { box-shadow: inset 0 1px 0 var(--ds-line); }
.rt .rt-pg-rail .rt-pg-sec { padding-bottom: var(--ds-s-3); }
.rt .rt-pg-sh { display: flex; align-items: center; gap: var(--ds-s-3); height: 72px; padding: var(--ds-s-4) 0 0; }
.rt .rt-pg-h { margin: 0; font-size: var(--ds-text-md); line-height: var(--ds-lh-md); font-weight: var(--ds-w-semi); letter-spacing: var(--ds-track-tight); color: var(--ds-ink); white-space: nowrap; }
.rt .rt-pg-meta { font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-3); white-space: nowrap; font-variant-numeric: var(--ds-nums); }
.rt .rt-pg-end { margin-left: auto; display: flex; align-items: center; gap: var(--ds-s-3); min-width: 0; }
.rt .rt-pg-tools { gap: var(--ds-s-3); }
.rt .rt-pg-nav { display: inline-flex; align-items: center; gap: var(--ds-s-1); padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--ds-font); font-size: var(--ds-text-base); line-height: var(--ds-lh-base); font-weight: var(--ds-w-medium); color: var(--ds-ink-2); white-space: nowrap; }
.rt .rt-pg-nav .rt-ico { width: 14px; height: 14px; color: var(--ds-icon); }
.rt .rt-pg-nav.rt-pg-nav-sm { font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); }
.rt .rt-pg-nav:hover { color: var(--ds-ink); }
.rt .rt-pg-tfoot { padding: var(--ds-s-3) 0 0; }
.rt .rt-pg-loading { padding: var(--ds-s-3) 0 0; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); }
.rt .rt-pg-empty { padding: var(--ds-s-3) 0; font-size: var(--ds-text-base); color: var(--ds-ink-3); box-shadow: inset 0 1px 0 var(--ds-line); }
.rt .rt-pg-note { padding: 0 0 var(--ds-s-2); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); }
.rt .rt-pg-fresh, .rt .rt-pg-foot { display: flex; align-items: center; gap: 6px; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); }
.rt .rt-pg-fresh { margin: calc(-1 * var(--ds-s-1)) 0 var(--ds-s-2); }
.rt .rt-pg-fresh .rt-ico, .rt .rt-pg-foot .rt-ico { width: 12px; height: 12px; stroke-width: 2; color: var(--ds-icon); }
.rt .rt-pg-foot { padding: var(--ds-s-3) var(--ds-gutter) var(--ds-s-6); box-shadow: inset 0 1px 0 var(--ds-line); }
.rt .rt-pg-count { font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); white-space: nowrap; font-variant-numeric: var(--ds-nums); }

/* ── open work rows (mockup .bi) ────────────────────────────────────── */
.rt .rt-pg-bi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-s-3); padding: 9px 0 10px; box-shadow: inset 0 -1px 0 var(--ds-hair); align-items: start; }
.rt .rt-pg-rows > .rt-pg-bi:first-child { box-shadow: inset 0 -1px 0 var(--ds-hair); }
.rt .rt-pg-rows > .rt-pg-bi:last-child { box-shadow: none; }
.rt .rt-pg-bp { grid-column: 1; grid-row: 1; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ds-ink); min-width: 0; }
.rt .rt-pg-bp b { font-weight: var(--ds-w-semi); }
.rt .rt-pg-bp .rt-kk { color: var(--ds-ink-3); font-weight: var(--ds-w-regular); }
.rt .rt-pg-bp .rt-code { vertical-align: 1px; }
.rt .rt-pg-bs { grid-column: 2; grid-row: 1; padding-top: 2px; }
.rt .rt-pg-bm { grid-column: 1 / -1; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-pg-bm .rt-pg-sep { margin: 0 4px; color: var(--ds-ink-3); }

/* ── history tabs + selects/inputs ──────────────────────────────────── */
.rt .rt-pg-tabs { display: flex; align-items: stretch; gap: var(--ds-s-5); height: 32px; margin-left: var(--ds-s-4); }
.rt .rt-pg-tab { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--ds-font); font-size: var(--ds-text-base); font-weight: var(--ds-w-medium); color: var(--ds-ink-2); position: relative; white-space: nowrap; }
.rt .rt-pg-tab .rt-pg-n, .rt .rt-pg-grp .rt-pg-n { color: var(--ds-ink-3); font-weight: var(--ds-w-regular); font-variant-numeric: var(--ds-nums); }
.rt .rt-pg-tab.rt-on { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rt .rt-pg-tab.rt-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--ds-r-tag) var(--ds-r-tag) 0 0; background: var(--ds-selection); }
.rt .rt-pg-select { position: relative; display: inline-flex; align-items: center; height: var(--ds-control-h); border-radius: var(--ds-r-md); background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-field); }
.rt .rt-pg-select select { appearance: none; -webkit-appearance: none; height: 100%; border: 0; background: transparent; field-sizing: content; max-width: 240px; text-overflow: ellipsis; padding: 0 30px 0 10px; font-family: var(--ds-font); font-size: var(--ds-text-base); color: var(--ds-ink); cursor: pointer; border-radius: var(--ds-r-md); }
.rt .rt-pg-select .rt-ico { position: absolute; right: var(--ds-s-2); color: var(--ds-icon); pointer-events: none; }
.rt .rt-pg-input { display: flex; align-items: center; gap: var(--ds-s-2); width: 220px; height: var(--ds-control-h); padding: 0 var(--ds-s-3); border-radius: var(--ds-r-md); background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-field); }
.rt .rt-pg-input .rt-ico { color: var(--ds-icon); }
.rt .rt-pg-input input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; font-family: var(--ds-font); font-size: var(--ds-text-base); color: var(--ds-ink); outline: none; }
.rt .rt-pg-input input::placeholder { color: var(--ds-ink-3); }
.rt .rt-pg-input:focus-within, .rt .rt-pg-select:focus-within { box-shadow: inset 0 0 0 1px var(--ds-line); outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); }

/* ── tables (mockup table.ht) ───────────────────────────────────────── */
.rt .rt-pg-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); table-layout: fixed; }
.rt .rt-pg-table th { height: 32px; text-align: left; padding: 0 var(--ds-s-2); box-shadow: inset 0 -1px 0 var(--ds-line), inset 0 1px 0 var(--ds-line); white-space: nowrap; overflow: hidden; }
.rt .rt-pg-table td { padding: 10px var(--ds-s-2); box-shadow: inset 0 -1px 0 var(--ds-hair); vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: var(--ds-nums); }
.rt .rt-pg-table th:first-child, .rt .rt-pg-table td:first-child { padding-left: 0; }
.rt .rt-pg-table th:last-child, .rt .rt-pg-table td:last-child { padding-right: 0; }
.rt .rt-pg-table .rt-r { text-align: right; padding-left: var(--ds-s-4); }
.rt .rt-pg-table .rt-ctr { text-align: center; }
.rt .rt-pg-table td.rt-wrap { white-space: normal; }
.rt .rt-pg-table .rt-kk { color: var(--ds-ink-3); font-weight: var(--ds-w-medium); }
.rt .rt-pg-sub { display: block; margin-top: 2px; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); }
.rt .rt-pg-hc th:first-child { padding-left: 20px; }
.rt .rt-pg-car { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin-right: var(--ds-s-2); padding: 0; border: 0; background: none; color: var(--ds-icon); vertical-align: -1px; cursor: pointer; }
.rt span.rt-pg-car { cursor: default; }
.rt .rt-pg-table tr.rt-pg-xp td, .rt .rt-pg-table tr.rt-pg-xpd td { background: var(--ds-surface); }
.rt .rt-pg-table tr.rt-pg-xp td { box-shadow: none; }
.rt .rt-pg-table tr.rt-pg-xpd td { white-space: normal; padding: 0 var(--ds-s-2) var(--ds-s-4) 20px; color: var(--ds-ink-2); }
.rt .rt-pg-avs { display: inline-flex; gap: 2px; }
.rt .rt-pg-table .rt-av { vertical-align: top; }
.rt .rt-pg-res { display: inline-flex; align-items: center; gap: var(--ds-s-2); }
.rt .rt-pg-qual { color: var(--ds-ink-3); font-variant-numeric: var(--ds-nums); }
.rt .rt-pg-table .rt-pg-qual { font-size: var(--ds-text-base); }

/* column widths (colgroup) */
.rt .rt-pg-w24 { width: 24px; } .rt .rt-pg-w56 { width: 56px; } .rt .rt-pg-w64 { width: 64px; } .rt .rt-pg-w72 { width: 72px; }
.rt .rt-pg-w96 { width: 96px; } .rt .rt-pg-w104 { width: 104px; } .rt .rt-pg-w108 { width: 108px; } .rt .rt-pg-w112 { width: 112px; }
.rt .rt-pg-w120 { width: 120px; } .rt .rt-pg-w144 { width: 144px; } .rt .rt-pg-w152 { width: 152px; } .rt .rt-pg-w160 { width: 160px; } .rt .rt-pg-w168 { width: 168px; }

/* ── equipment (full width) ─────────────────────────────────────────── */
.rt .rt-pg-grp { display: flex; align-items: center; gap: var(--ds-s-2); padding: var(--ds-s-4) 0 var(--ds-s-2); font-size: var(--ds-text-md); line-height: var(--ds-lh-md); font-weight: var(--ds-w-semi); }
.rt .rt-pg-grp .rt-ico { width: 14px; height: 14px; color: var(--ds-icon); }
.rt .rt-pg-grp .rt-code { margin-left: 2px; }
.rt .rt-pg-grp .rt-pg-n { font-size: var(--ds-text-sm); }
.rt .rt-pg-eq td.rt-pg-eqname { font-weight: var(--ds-w-semi); }
.rt .rt-pg-eq td.rt-pg-serial { color: var(--ds-ink-2); }

/* ── customer sites table (mockup table.st7) ────────────────────────── */
.rt .rt-pg-sn { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
.rt .rt-pg-sic { margin-top: 2px; color: var(--ds-icon); }
.rt .rt-pg-snm { font-weight: var(--ds-w-semi); color: var(--ds-ink); }
.rt .rt-pg-moved { display: block; margin-top: var(--ds-s-1); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--rt-moved-ink); }
.rt .rt-pg-moved .rt-link { color: inherit; }
.rt .rt-pg-sites td.rt-pg-go { text-align: right; color: var(--ds-icon); }
.rt .rt-pg-sites td.rt-pg-go .rt-link { color: var(--ds-icon); }

/* ── rail: photos, contacts / recurring rows, key-value ─────────────── */
.rt .rt-pg-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-bottom: var(--ds-s-2); }
.rt .rt-pg-photos span { aspect-ratio: 4 / 3; border-radius: var(--ds-r-sm); overflow: hidden; background: var(--ds-thumb); }
.rt .rt-pg-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt .rt-pg-ctc { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-s-3); padding: 9px 0 10px; box-shadow: inset 0 -1px 0 var(--ds-hair); align-items: start; }
.rt .rt-pg-list > .rt-pg-ctc:last-child { box-shadow: none; }
.rt .rt-pg-cp { font-size: var(--ds-text-base); line-height: var(--ds-lh-base); font-weight: var(--ds-w-semi); display: flex; align-items: center; gap: var(--ds-s-2); }
.rt .rt-pg-cp.rt-pg-cp-m { font-weight: var(--ds-w-medium); }
.rt .rt-pg-cm { font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-pg-cm.rt-wrap { white-space: normal; }
.rt .rt-pg-cv { font-size: var(--ds-text-base); line-height: var(--ds-lh-base); text-align: right; white-space: nowrap; font-variant-numeric: var(--ds-nums); }
.rt .rt-pg-cv .rt-pg-cm { text-align: right; }
.rt .rt-pg-span { grid-column: 1 / -1; }
.rt .rt-pg-kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); margin: 0; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); }
.rt .rt-pg-kv dt, .rt .rt-pg-kv dd { margin: 0; padding: 7px 0 8px; box-shadow: inset 0 -1px 0 var(--ds-hair); min-width: 0; }
.rt .rt-pg-kv dt { color: var(--ds-ink-3); }
.rt .rt-pg-kv dt:last-of-type, .rt .rt-pg-kv dd:last-of-type { box-shadow: none; }
.rt .rt-pg-hy { font-variant-numeric: normal; }