/* Record tabs: site band on an open job, site panel in the open quote editor, "also editing" marker, save-held
   banner and changed-value cells (records-band.js). Ported from the approved mockup (record-tabs v2
   records.css: .band, .bandc, .bi, .ev, .vc, .qsite, .sp-head, .psec, .flag, .presence, .banner.cfl, .was).
   Values only through var(--ds-*) / var(--rt-*); every selector under .rt. Primitives (rt-st, rt-code, rt-av,
   rt-link, rt-ico, rt-btn) come from records-base.css and are not restyled here. */

/* text in these components is proportional (a tabular hyphen reads as a gap: "pre - audit"); numbers that
   line up in columns (keys, dates, times, counts) opt back in below */
.rt.rt-band, .rt.rt-qpanel, .rt.rt-banner-held, .rt.rt-presence { font-variant-numeric: normal; }

/* ── shared pieces ─────────────────────────────────────────────────── */
.rt .rt-lb { display: flex; align-items: center; gap: 6px; height: 24px; margin-bottom: 2px; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); font-weight: var(--ds-w-semi); color: var(--ds-ink-3); white-space: nowrap; }
.rt .rt-lb .rt-n { font-weight: var(--ds-w-regular); font-variant-numeric: var(--ds-nums); }
.rt .rt-lb .rt-nav, .rt .rt-lb .rt-band-toggle { margin-left: auto; }
.rt .rt-lb .rt-nav + .rt-band-toggle { margin-left: var(--ds-s-4); }
.rt .rt-nav { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; font-family: var(--ds-font); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); font-weight: var(--ds-w-medium); color: var(--ds-ink-3); white-space: nowrap; cursor: pointer; }
.rt .rt-nav .rt-ico { color: var(--ds-icon); }
.rt .rt-nav:hover { color: var(--ds-ink); }
.rt .rt-qual { color: var(--ds-ink-3); }
.rt .rt-key, .rt b.rt-key { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rt .rt-u { text-decoration: underline; text-decoration-color: var(--ds-field); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rt .rt-chain { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-variant-numeric: var(--ds-nums); color: var(--ds-ink-2); }
.rt .rt-chain .rt-ico { color: var(--ds-icon); }
.rt .rt-chain .rt-st { margin-left: 2px; }

/* ── rows (band columns + panel sections) ─────────────────────────── */
.rt .rt-bi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-s-3); padding: 5px 0 6px; box-shadow: inset 0 -1px 0 var(--ds-hair); align-items: start; }
.rt .rt-bi:last-child { box-shadow: none; }
.rt .rt-bi .rt-p { min-width: 0; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt .rt-bi .rt-p b { font-weight: var(--ds-w-regular); color: var(--ds-ink-2); }
.rt .rt-bi .rt-p b.rt-key { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rt .rt-kk { color: var(--ds-ink-3); margin-right: 6px; font-weight: var(--ds-w-regular); font-variant-numeric: var(--ds-nums); }
.rt .rt-kk.rt-key { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rt .rt-bi .rt-code { margin-left: 6px; vertical-align: 1px; }
/* the equipment label wraps instead of ellipsizing: two units at a site often differ only in the trailing
   " · …NNNN" serial suffix, which an end ellipsis would cut */
.rt .rt-bi .rt-p.rt-eq { display: flex; align-items: flex-start; }
.rt .rt-bi .rt-p.rt-eq > .rt-link { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.rt .rt-bi .rt-p.rt-eq > .rt-code { flex: none; }
.rt .rt-bi .rt-p.rt-eq > .rt-sub { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-bi .rt-sub { color: var(--ds-ink-2); }
.rt .rt-bi .rt-s { grid-column: 2; grid-row: 1; }
.rt .rt-bi .rt-m { grid-column: 1 / -1; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); white-space: normal; }
.rt .rt-bi.rt-ms .rt-p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rt .rt-bi.rt-ms .rt-m { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ds-s-2); }
.rt .rt-bi.rt-ms .rt-m .rt-st { flex: none; }
.rt .rt-bi.rt-av2 { grid-template-columns: 24px minmax(0, 1fr); }
.rt .rt-bi.rt-av2 .rt-av, .rt .rt-bi.rt-av2 .rt-av-gap { grid-row: 1 / 3; margin-top: 2px; }
.rt .rt-bi.rt-av2 .rt-p, .rt .rt-bi.rt-av2 .rt-m { grid-column: 2; }
.rt .rt-bi.rt-fact { display: block; padding: 4px 0 5px; }
.rt .rt-bi.rt-fact .rt-lb { height: auto; margin: 0; font-weight: var(--ds-w-medium); }
.rt .rt-bi.rt-fact .rt-v { display: flex; align-items: center; gap: var(--ds-s-2); min-width: 0; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; }
.rt .rt-bi.rt-fact .rt-v b { font-weight: var(--ds-w-regular); color: var(--ds-ink-2); }
.rt .rt-bi.rt-fact .rt-v b.rt-key { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rt .rt-bi.rt-fact .rt-v .rt-code { margin-left: 0; }
.rt .rt-bi.rt-fact .rt-v .rt-qual { overflow: hidden; text-overflow: ellipsis; }
.rt .rt-bi.rt-fact .rt-v > .rt-link { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.rt .rt-bi.rt-fact .rt-v > .rt-code,
.rt .rt-bi.rt-fact .rt-v > .rt-st { flex: none; }

/* activity */
.rt .rt-ev { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: var(--ds-s-2); padding: 3px 0; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); }
.rt .rt-ev .rt-t { font-size: var(--ds-text-sm); color: var(--ds-ink-3); white-space: nowrap; font-variant-numeric: var(--ds-nums); }
.rt .rt-ev .rt-w { color: var(--ds-ink-2); }
.rt .rt-ev .rt-tm { display: block; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); font-variant-numeric: var(--ds-nums); }

/* vertical job chain */
.rt .rt-vchain { margin-top: 2px; }
.rt .rt-vc { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--ds-s-2); padding: 5px 0 6px; }
.rt .rt-vc::before { content: ""; position: absolute; left: 7px; top: 20px; bottom: -8px; width: 1px; background: var(--ds-line); }
.rt .rt-vc:last-child::before { display: none; }
.rt .rt-vc .rt-dot { position: relative; z-index: 1; width: 9px; height: 9px; margin: 4px 0 0 3px; border-radius: var(--ds-r-full); background: var(--ds-ink-3); }
.rt .rt-vc.rt-vc-me .rt-dot { background: var(--ds-selection); box-shadow: 0 0 0 3px var(--ds-surface), 0 0 0 4px var(--ds-selection); }
.rt .rt-vc .rt-p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); }
.rt .rt-vc .rt-p b { font-weight: var(--ds-w-regular); }
.rt .rt-vc .rt-p b.rt-key { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rt .rt-vc .rt-m { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ds-s-2); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); }

/* overlap flag */
.rt .rt-flag { display: flex; align-items: center; gap: var(--ds-s-2); min-width: 0; padding: 2px 0 8px; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink); white-space: nowrap; }
.rt .rt-flag::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--ds-st-route); -webkit-mask: var(--rt-flag-g) center / 12px 12px no-repeat; mask: var(--rt-flag-g) center / 12px 12px no-repeat; --rt-flag-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6 3.7v2.6' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8.1' r='.8'/%3E%3C/svg%3E"); }
.rt .rt-flag b { font-weight: var(--ds-w-semi); }
.rt .rt-flag .rt-sp { color: var(--ds-ink-3); overflow: hidden; text-overflow: ellipsis; }

/* ── job band: expanded ────────────────────────────────────────────── */
.rt.rt-band-expanded { display: flex; align-items: flex-start; column-gap: var(--ds-s-8); padding-bottom: var(--ds-s-2); box-shadow: inset 0 1px 0 var(--rt-band-rule); }
.rt.rt-band-expanded .rt-bcol { flex: 1 1 0; min-width: 0; padding: var(--ds-s-3) 0 var(--ds-s-2); }
.rt.rt-band-expanded .rt-bcol-site { flex: 0 0 256px; }
.rt.rt-band-repair .rt-bcol-equipment { flex-grow: 0.95; }
.rt.rt-band-repair .rt-bcol-activity { flex-grow: 1.2; }
.rt.rt-band-repair .rt-bcol-openAtSite { flex-grow: 1.1; }
.rt.rt-band-billing .rt-bcol-chain { flex-grow: 1.3; }
.rt.rt-band-wide .rt-bcol-site { flex-basis: 296px; }
.rt.rt-band-repair.rt-band-wide .rt-bcol-equipment { flex-grow: 1; }
.rt.rt-band-repair.rt-band-wide .rt-bcol-activity { flex-grow: 1.1; }
.rt.rt-band-repair.rt-band-wide .rt-bcol-openAtSite { flex-grow: 1.35; }
.rt.rt-band-expanded .rt-ev .rt-w { white-space: normal; }

/* ── job band + quote panel: collapsed one-liners ─────────────────── */
.rt.rt-band-collapsed, .rt.rt-qpanel-collapsed { display: flex; align-items: center; height: 48px; min-width: 0; overflow: hidden; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); white-space: nowrap; }
.rt.rt-band-collapsed { box-shadow: inset 0 1px 0 var(--rt-band-rule); }
.rt.rt-qpanel-collapsed { box-shadow: inset 0 -1px 0 var(--rt-band-rule); margin-bottom: var(--ds-s-4); }
.rt.rt-band-collapsed > .rt-ico, .rt.rt-qpanel-collapsed > .rt-ico { color: var(--ds-icon); margin-right: var(--ds-s-2); }
.rt .rt-sg { display: flex; align-items: center; gap: 6px; flex: none; }
.rt .rt-sg b { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rt .rt-sg .rt-qual { margin-left: 2px; }
.rt .rt-sg.rt-sg-site { flex: 0 1 auto; min-width: 0; }
.rt .rt-sg.rt-sg-site > .rt-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-sg.rt-fl { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.rt .rt-sg.rt-fl b.rt-m5 { font-weight: var(--ds-w-medium); }
.rt .rt-sg.rt-cu { margin-left: var(--ds-s-3); color: var(--ds-ink-2); }
.rt .rt-sg.rt-cu .rt-ico { color: var(--ds-icon); }
.rt .rt-sg .rt-code { margin-left: 0; }
.rt .rt-sg.rt-chain { gap: 6px; }
.rt .rt-sg.rt-chain .rt-ico { width: 12px; height: 12px; }
.rt .rt-dv { width: 1px; height: 16px; flex: none; margin: 0 var(--ds-s-4); background: var(--ds-line); }
.rt.rt-band-collapsed .rt-band-toggle, .rt.rt-qpanel-collapsed .rt-band-toggle { margin-left: auto; padding-left: var(--ds-s-4); flex: none; }
.rt.rt-qpanel-collapsed .rt-flag { padding: 0; flex: 0 1 auto; }

/* loading / error */
.rt.rt-band-loading .rt-sk { display: block; height: 10px; border-radius: var(--ds-r-tag); background: var(--ds-skeleton); flex: none; }
.rt.rt-band-loading .rt-sk-1 { width: 180px; }
.rt.rt-band-loading .rt-sk-2 { width: 120px; background: var(--ds-line); }
.rt.rt-band-loading .rt-sk-3 { width: 96px; background: var(--ds-line); }
.rt.rt-band-error > .rt-ico { color: var(--ds-st-route); }
.rt.rt-band-error .rt-band-retry { margin-left: var(--ds-s-3); }

/* ── quote panel: expanded ─────────────────────────────────────────── */
.rt.rt-qpanel-expanded { min-width: 0; }
.rt .rt-sp-head { display: flex; align-items: center; gap: var(--ds-s-3); height: 48px; font-size: var(--ds-text-md); line-height: var(--ds-lh-md); font-weight: var(--ds-w-semi); color: var(--ds-ink); white-space: nowrap; }
.rt .rt-sp-head > .rt-ico { color: var(--ds-icon); }
.rt .rt-sp-head > .rt-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-sp-head .rt-nav { margin-left: auto; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); }
.rt .rt-sp-head .rt-nav + .rt-band-toggle { margin-left: var(--ds-s-4); }
.rt .rt-psec { min-width: 0; padding: var(--ds-s-3) 0 var(--ds-s-4); box-shadow: inset 0 1px 0 var(--ds-line); }
.rt .rt-pgrid { display: grid; grid-template-columns: minmax(0, 1fr); box-shadow: inset 0 1px 0 var(--ds-line); }
.rt .rt-pgrid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rt .rt-pgrid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.rt .rt-pgrid > .rt-psec { box-shadow: none; }
.rt .rt-pgrid > .rt-psec + .rt-psec { padding-left: var(--ds-s-5); }
.rt .rt-pgrid > .rt-psec:not(:last-child) { padding-right: var(--ds-s-5); }
.rt .rt-psec .rt-bi .rt-p b { color: var(--ds-ink-2); font-weight: var(--ds-w-medium); }
.rt .rt-psec .rt-bi.rt-fact .rt-v b { font-weight: var(--ds-w-medium); }

/* ── "also editing" marker ─────────────────────────────────────────── */
.rt.rt-presence { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--ds-s-3); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-2); white-space: nowrap; vertical-align: middle; }
.rt.rt-presence .rt-av.rt-av-peer { width: 20px; height: 20px; background: var(--ds-info); color: var(--ds-surface); box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 3px var(--ds-st-done); }
.rt.rt-presence .rt-av-peer + .rt-av-peer { margin-left: -8px; }

/* ── save-held banner (f8) ─────────────────────────────────────────── */
.rt.rt-banner-held { margin: 0 0 var(--ds-s-3); padding: 6px var(--ds-s-2) 6px var(--ds-s-4); border-radius: var(--ds-r-md); background: var(--rt-banner-bg); font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); }
.rt.rt-banner-held .rt-banner-row { display: flex; align-items: center; gap: var(--ds-s-2); min-height: 32px; white-space: nowrap; }
.rt.rt-banner-held .rt-banner-row > .rt-ico { color: var(--ds-st-route); }
.rt.rt-banner-held .rt-banner-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rt.rt-banner-held b { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rt.rt-banner-held .rt-banner-end { margin-left: auto; display: flex; align-items: center; gap: var(--ds-s-2); flex: none; }
.rt.rt-banner-held .rt-conflicts { margin: 2px 0 4px; padding: 0 0 0 var(--ds-s-6); list-style: none; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-2); }
.rt.rt-banner-held .rt-conflicts li { padding: 2px 0; }

/* ── changed line cells (the quote editor adds class "rt rt-changed" to the row) ── */
.rt.rt-chg .rt-was { margin-right: 6px; text-decoration: line-through; color: var(--ds-ink-3); font-weight: var(--ds-w-regular); }
.rt.rt-chg .rt-by { margin-left: var(--ds-s-2); font-size: var(--ds-text-sm); font-weight: var(--ds-w-medium); color: var(--ds-ink-2); }
.rt.rt-changed > td { background: var(--rt-changed-bg); }
.rt.rt-changed > td:first-child { box-shadow: inset 2px 0 0 var(--rt-changed-rule), inset 0 -1px 0 var(--ds-hair); padding-left: 10px; }
.rt .rt-by { margin-left: var(--ds-s-2); font-size: var(--ds-text-sm); font-weight: var(--ds-w-medium); color: var(--ds-ink-2); }