/*
 * Keep this surface aligned with the light Teams and native-app shell. Following the device
 * colour scheme made Work the only product surface that switched to an unreviewed dark theme.
 */
:root {
  --bg: #f5f5f5; --surface: #fff; --surface-2: #fafafa; --text: #242424;
  --muted: #616161; --line: #e1e1e1; --accent: #6264a7; --accent-pressed: #464775;
  --danger: #d13438; --warning: #8a5600; --success: #107c10;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08); --shadow-raised: 0 18px 55px rgba(36, 36, 36, .16);
  --radius: 14px;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { width: min(1180px, 100%); margin: 0 auto; padding: 16px 18px 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar > div:first-child { min-width: 0; }
.topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 25px; letter-spacing: -.02em; }
.topbar p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.preview-banner { position: sticky; z-index: 3; top: max(8px, env(safe-area-inset-top)); margin-top: 12px;
  border: 1px solid color-mix(in srgb, #f6a800 42%, var(--line)); border-radius: 10px;
  background: color-mix(in srgb, #f6a800 11%, var(--surface)); color: var(--warning);
  padding: 9px 12px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.configuration-refresh-banner { position: sticky; z-index: 3; top: max(8px, env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); padding: 9px 12px;
  color: var(--text); font-size: 12px; font-weight: 650; line-height: 1.35; }
.configuration-refresh-banner .button { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.endpoint-controller-notice { display: grid; gap: 4px; margin-bottom: 16px; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px;
  background: var(--surface); color: var(--text); }
.endpoint-controller-notice span { color: var(--muted); line-height: 1.45; }
.preview-panel-banner { position: sticky; z-index: 2; top: calc(-1 * max(20px, env(safe-area-inset-top)));
  margin: calc(-1 * max(20px, env(safe-area-inset-top))) -20px 14px; padding: 9px 20px;
  border-bottom: 1px solid color-mix(in srgb, #f6a800 42%, var(--line));
  background: color-mix(in srgb, #f6a800 11%, var(--surface)); color: var(--warning);
  font-size: 11px; font-weight: 700; line-height: 1.35; }
.button { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); white-space: nowrap;
  display: inline-flex; align-items: center; padding: 8px 15px; color: inherit; font-weight: 650; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--surface-2); }
.button:disabled { opacity: .55; cursor: wait; }
.preview-read-only button:disabled { cursor: not-allowed; }
.button.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.button.primary:hover { background: var(--accent-pressed); }
.button.full { width: 100%; }
.view-tabs { display: flex; max-width: 100%; gap: 3px; margin-top: 20px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { display: none; }
.view-tab { position: relative; flex: 0 0 auto; border: 0; background: transparent; padding: 10px 13px; color: var(--muted); cursor: pointer; text-decoration: none; }
.view-tab.active { color: var(--text); font-weight: 700; }
.view-tab.active::after { content: ""; position: absolute; height: 3px; border-radius: 3px; background: var(--accent); inset: auto 10px -2px; }
.filters { display: flex; gap: 7px; overflow-x: auto; padding: 13px 0 10px; scrollbar-width: none; }
.filter { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 6px 11px; font-size: 13px; cursor: pointer; }
.filter.active { background: var(--text); border-color: var(--text); color: var(--surface); }
.pipeline-filters .filter { text-transform: capitalize; }
#content { outline: 0; }
.view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.view-toolbar p { color: var(--muted); font-size: 13px; }
.loading, .empty, .error-state, .auth-state { min-height: 40vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); text-align: center; }
.auth-state { max-width: 430px; margin: 0 auto; line-height: 1.5; }
.auth-state strong { color: var(--text); font-size: 20px; }
.auth-state .inline-error { margin: 0; }
.bridgeconnect-entry {
  --bg: #f4f7f7;
  --accent: #007b77;
  --accent-pressed: #00625f;
}
.bridgeconnect-entry .app-shell { width: 100%; min-height: 100vh; padding: 0; }
.bridgeconnect-entry .topbar,
.bridgeconnect-entry .preview-banner,
.bridgeconnect-entry .configuration-refresh-banner { display: none; }
.bridgeconnect-entry #content { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.bridgeconnect-auth { width: min(448px, 100%); min-height: 410px; padding: 48px 44px 42px; border: 1px solid #dce5e4; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgb(39 39 42 / 9%); }
.bridgeconnect-auth-brand { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 56px; margin-bottom: 20px; }
.bridgeconnect-logo-crop { display: block; width: 62px; height: 56px; overflow: hidden; flex: 0 0 62px; }
.bridgeconnect-logo-crop img { display: block; width: auto; max-width: none; height: 56px; }
.bridgeconnect-wordmark { display: inline-flex; align-items: baseline; color: #34343b; font-size: 26px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.bridgeconnect-wordmark b { font: inherit; }
.bridgeconnect-wordmark b:last-child { color: #007b77; }
.bridgeconnect-auth h1 { color: var(--text); font-size: 28px; letter-spacing: -.035em; line-height: 1.18; }
.bridgeconnect-auth-copy { max-width: 330px; color: var(--muted); line-height: 1.5; }
.microsoft-signin-button { display: grid; grid-template-columns: 21px minmax(0, 1fr) 21px; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin-top: 12px; padding: 0 14px; border: 1px solid #8c8c8c; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 18%); color: #1f1f1f; font-family: "Segoe UI", sans-serif; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; }
.microsoft-signin-button:hover { border-color: #666; background: #f7f7f7; }
.microsoft-signin-button:focus-visible { outline: 3px solid color-mix(in srgb, #0067b8 35%, transparent); outline-offset: 2px; }
.microsoft-signin-button:disabled { opacity: .65; cursor: wait; }
.microsoft-signin-icon { width: 21px; height: 21px; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.list { display: grid; gap: 8px; }
.list-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(130px, .7fr) minmax(115px, .55fr) 24px;
  gap: 15px; align-items: center; width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); padding: 13px 14px; text-align: left; cursor: pointer; }
.list-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.row-meta, .row-cell { color: var(--muted); font-size: 13px; margin-top: 3px; }
.status { justify-self: start; border-radius: 999px; padding: 4px 8px; background: var(--surface-2); font-size: 12px; text-transform: capitalize; }
.status.in_progress, .status.review { color: var(--accent); }
.status.completed { color: var(--success); }
.status.blocked { color: var(--danger); }
.chevron { color: var(--muted); font-size: 20px; }
.section-heading { margin: 12px 0 8px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.dispatch-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.dispatch-stat, .dispatch-card, .recurrence-row { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.dispatch-stat { padding: 12px; }
.dispatch-stat strong { display: block; font-size: 22px; }
.dispatch-stat span { color: var(--muted); font-size: 12px; }
.dispatch-board { display: grid; gap: 9px; }
.project-summary { display: flex; gap: 18px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.project-summary strong { color: var(--text); font-size: 16px; }
.project-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.project-column { min-width: 220px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 86%, var(--bg)); }
.project-column-head, .project-card-head, .project-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.project-column-head { margin: 1px 2px 9px; font-size: 13px; }
.project-column-head span { color: var(--muted); }
.project-card { display: flex; width: 100%; flex-direction: column; gap: 7px; margin-top: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.project-card:hover { border-color: var(--accent); }
.project-card-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card-head span, .project-card-meta, .project-card-phase { color: var(--muted); font-size: 11px; }
.project-card-phase { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-progress { height: 4px; overflow: hidden; border-radius: 3px; background: var(--line); }
.project-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.project-column.blocked .project-progress i { background: var(--danger); }
.project-empty { margin: 18px 2px; color: var(--muted); font-size: 12px; text-align: center; }
.pipeline-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(235px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 10px; }
.pipeline-column { min-height: 130px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 86%, var(--bg)); }
.pipeline-column-head { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 7px; margin: 1px 2px 9px; font-size: 13px; text-transform: capitalize; }
.pipeline-column-head > span:last-child { color: var(--muted); }
.pipeline-dot { width: 8px; height: 8px; border-radius: 50%; }
.pipeline-card { display: grid; gap: 8px; margin-top: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pipeline-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--surface) 96%, var(--accent)); }
.pipeline-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pipeline-card-head, .pipeline-card-meta, .crm-card-head, .crm-deal { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.pipeline-card-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-card-head span, .pipeline-card p, .pipeline-card-meta { color: var(--muted); font-size: 11px; }
.customer-row { cursor: pointer; }
.customer-row:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); outline: 0; }
.crm-dialog-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.crm-dialog-section h3 { font-size: 15px; }
.crm-dialog-section .button { margin-top: 12px; }
.linked-record { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid var(--line); padding: 11px 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.linked-record:last-child { border-bottom: 0; }
.linked-record strong, .linked-record small { display: block; }
.linked-record small { margin-top: 3px; color: var(--muted); }
.customer-profile-summary { display: grid; gap: 7px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.customer-profile-summary p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.crm-card { margin: 18px 0; color: var(--text); border-style: solid; }
.crm-card-head p, .crm-deal span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.crm-deal { margin-top: 11px; padding: 10px; border-radius: 9px; background: var(--surface-2); }
.crm-history { margin-top: 10px; }
.crm-history summary { cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 700; }
.crm-history p { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11px; }
.crm-history small { flex-shrink: 0; color: var(--muted); }
.dispatch-card { padding: 13px 14px; }
.dispatch-card-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.dispatch-card-head button { border: 0; background: transparent; padding: 0; color: var(--text); text-align: left; cursor: pointer; }
.dispatch-card-head small { display: block; margin-top: 3px; color: var(--muted); }
.dispatch-workers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dispatch-worker { border-radius: 999px; background: var(--surface-2); padding: 5px 8px; color: var(--muted); font-size: 12px; }
.dispatch-worker.eligible { color: var(--success); }
.dispatch-worker.blocked { color: var(--danger); }
.dispatch-warning { margin-top: 8px; color: var(--danger); font-size: 12px; }
.recurrence-list { display: grid; gap: 7px; margin-bottom: 16px; }
.recurrence-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
/* display:block, matching .dispatch-card-head small directly above. Without
   it the title and the schedule are adjacent INLINE elements and render as
   "Updated pre-purchase inspectionweekly · next 19 July" with no separator. */
.recurrence-row span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
dialog { width: min(650px, calc(100% - 24px)); max-height: calc(100dvh - 28px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-raised); }
dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog > form { display: flex; width: 100%; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
dialog::backdrop { background: rgba(10, 14, 20, .45); backdrop-filter: blur(3px); }
.dialog-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; padding: 20px 20px 8px; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.dialog-header h2 { margin-top: 3px; font-size: 23px; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-2); font-size: 24px; line-height: 1; cursor: pointer; }
.dialog-body { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; touch-action: pan-y; padding: 14px 20px 20px; }
label { display: grid; min-width: 0; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 650; }
.field-label { display: inline; min-width: 0; }
input, select, textarea { width: 100%; max-width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 11px 12px; outline: 0; }
input[type="date"], input[type="datetime-local"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  -webkit-appearance: none;
  appearance: none;
}
.dispatch-card .status { flex: 0 0 auto; white-space: nowrap; }
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.hint { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.dialog-actions { margin-top: 18px; }
.dialog-actions.split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 15px; }
.address-field, .customer-field { position: relative; }
.suggestions { position: absolute; z-index: 9; top: calc(100% - 16px); left: 0; right: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.suggestion { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 10px 11px; text-align: left; cursor: pointer; }
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover { background: var(--surface-2); }
.suggestion strong, .suggestion small { display: block; }
.suggestion small, .maps-attribution { color: var(--muted); font-size: 10px; font-weight: 500; }
.text-button { border: 0; background: transparent; color: var(--accent); padding: 0; font-size: inherit; cursor: pointer; }
.ai-summary { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); padding: 11px 12px; font-size: 13px; line-height: 1.4; }
.review-notes { margin-top: 13px; padding: 11px 12px; border-radius: 10px; background: color-mix(in srgb, #f6a800 12%, var(--surface)); color: var(--warning); font-size: 12px; line-height: 1.45; }
.agreement-warning { display: flex; min-height: 32px; align-items: center; gap: 5px; overflow: hidden; padding: 7px 10px; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.agreement-warning .text-button { flex: 0 0 auto; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.inline-error { margin: 0 20px 18px; color: var(--danger); font-size: 13px; }
.hidden { display: none !important; }
.detail-panel { position: fixed; z-index: 4; top: 0; right: 0; width: min(520px, 100%); height: 100dvh; overflow-x: hidden; overflow-y: auto; transform: translateX(102%); transition: transform .22s ease; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow); padding: max(20px, env(safe-area-inset-top)) 20px 28px; }
.detail-panel.open { transform: none; }
.detail-top {
  position: sticky;
  z-index: 3;
  top: calc(-1 * max(20px, env(safe-area-inset-top)));
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: calc(-1 * max(20px, env(safe-area-inset-top))) -20px 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: max(20px, env(safe-area-inset-top)) 20px 12px;
}
.detail-top > div:first-child { min-width: 0; flex: 1; }
.detail-top-actions, .job-actions { display: flex; align-items: center; gap: 8px; }
.detail-top-actions { flex: 0 0 auto; align-self: flex-start; }
.detail-top-actions .button { min-height: 36px; padding: 6px 11px; font-size: 14px; }
.detail-top-actions .icon-button { width: 36px; height: 36px; }
.job-actions { margin: 0 0 18px; flex-wrap: wrap; }
.workflow-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 18px 0; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.workflow-card .section-heading { display: block; margin-top: 0; }
.workflow-card .job-actions { justify-content: flex-end; margin: 0; }
.detail-number { color: var(--muted); font-size: 12px; }
.detail-panel h2 { margin-top: 4px; overflow-wrap: anywhere; font-size: 18px; line-height: 1.2; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.detail-card { border: 1px solid var(--line); border-radius: 10px; padding: 11px; }
.detail-card span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.operations-section { margin: 20px 0; }
.operations-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.operations-heading h3 { margin: 0; }
.operations-list { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.operation-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 11px; border-bottom: 1px solid var(--line); }
.operation-row:last-child { border-bottom: 0; }
.operation-row > span:first-child { min-width: 0; }
.operation-row strong, .operation-row small { display: block; }
.operation-row small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; }
.operation-actions { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.operation-actions .text-button:disabled { color: var(--muted); cursor: not-allowed; }
.button.compact { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.labour-summary { display: flex; align-items: baseline; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.labour-summary span { color: var(--muted); font-size: 12px; }
.compact-list { margin-top: 8px; }
.compact-list .operation-row { min-height: 46px; }
.portal-engagement { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.portal-live { display: inline-flex; align-items: center; gap: 6px; color: #16845b; font-size: 11px; font-weight: 700; }
.portal-live > span { width: 7px; height: 7px; border-radius: 50%; background: #20a66f; box-shadow: 0 0 0 3px color-mix(in srgb, #20a66f 18%, transparent); }
.engagement-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.engagement-metrics > div { display: grid; gap: 2px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.engagement-metrics strong { font-size: 16px; }
.engagement-metrics span, .engagement-last, .engagement-resources small { color: var(--muted); font-size: 10px; }
.engagement-last { margin: 8px 1px 0; }
.engagement-resources { display: grid; gap: 0; margin-top: 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.engagement-resources > strong { padding: 8px 9px; border-bottom: 1px solid var(--line); font-size: 11px; }
.engagement-resources > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border-bottom: 1px solid var(--line); font-size: 11px; }
.engagement-resources > div:last-child { border-bottom: 0; }
.engagement-resources small { text-align: right; }
.engagement-recent { margin-top: 10px; }
.engagement-recent summary { cursor: pointer; color: var(--accent); font-size: 11px; font-weight: 650; }
.engagement-recent > div { margin-top: 7px; border-top: 1px solid var(--line); }
.engagement-recent p { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.engagement-recent p > span, .engagement-recent p > small { color: var(--muted); }
.engagement-recent p > small { text-align: right; }
.timeline { border-top: 1px solid var(--line); padding-top: 15px; }
.timeline summary { cursor: pointer; font-weight: 700; }
.timeline summary span { margin-left: 5px; color: var(--muted); font-size: 12px; font-weight: 500; }
.timeline-list { display: grid; gap: 0; margin-top: 11px; }
.timeline-item { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 8px; min-height: 48px; }
.timeline-item::before { content: ""; position: absolute; left: 5px; top: 13px; bottom: -3px; width: 1px; background: var(--line); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--accent); }
.timeline-item strong, .timeline-item small { display: block; }
.timeline-item strong { font-size: 13px; }
.timeline-item small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 12px 2px; }
button.form-row { width: 100%; border-right: 0; border-bottom: 0; border-left: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.form-section { margin-top: 20px; padding-top: 2px; }
.form-section h3 { margin-bottom: 12px; }
.work-field { margin: 13px 0; }
.work-field-shell[hidden] { display: none; }
.work-field fieldset { margin: 0; padding: 0; border: 0; }
.field-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr); gap: 8px; }
.address-field { display: grid; gap: 8px; margin: 13px 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
/* Free-form asset details. Its own grid rather than .field-pair: that is a two-column grid and
   the remove button is a third child, which would wrap onto its own row. */
.attribute-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.attribute-row .text-button { padding: 4px; font-size: 18px; line-height: 1; }
.field-help { margin: 2px 0 8px; color: var(--muted); font-size: 13px; }
/* Reference-data grid. A spreadsheet, because these lists are built many rows at a time. */
.data-grid { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.data-grid th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); padding: 8px 10px; text-align: left; font-size: 13px; font-weight: 650; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-grid td { padding: 0; border-bottom: 1px solid var(--line); }
.data-grid td input { width: 100%; border: 0; border-radius: 0; background: transparent; padding: 9px 10px; font-size: 14px; }
.data-grid td input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface); }
.data-grid td input[data-locked] { color: var(--muted); }
.data-grid tr:hover td { background: var(--surface-2); }
.key-col { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.grid-row-actions { width: 40px; text-align: center; }
.row-new { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.grid-actions { display: flex; gap: 8px; align-items: center; }
#grid-scroll { max-height: 66vh; overflow: auto; }
/* Header cells are editable in place — the grid IS the schema editor. */
.data-grid th { padding: 4px 6px; }
.data-grid th input.column-name { width: calc(100% - 22px); border: 0; background: transparent; padding: 5px 4px; color: var(--muted); font-size: 13px; font-weight: 650; }
.data-grid th input.column-name:hover { background: var(--surface); border-radius: 6px; }
.data-grid th input.column-name:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface); color: var(--text); border-radius: 6px; }
.column-menu { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 4px; font-size: 12px; }
/* Provenance chip: which list a column draws its values from. */
.column-source { display: block; padding: 0 4px 4px; color: var(--accent); font-size: 11px; font-weight: 600; }
/* A control that does not apply yet is dimmed in place rather than removed, so the dialog keeps
   a constant height and nothing shifts under the pointer mid-interaction. */
.is-muted { opacity: .45; }
/* Choice controls rendered in the DOM instead of a native <select>, so there is no browser popup
   to position — and with a few options you can see them all without opening anything. */
.choice-field { display: grid; gap: 8px; margin: 13px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.choice-field legend { padding: 0 5px; color: var(--muted); font-size: 13px; font-weight: 650; }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-list { display: grid; gap: 6px; max-height: 168px; overflow-y: auto; }
.choice { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); padding: 8px 12px; font-size: 14px; text-align: left; cursor: pointer; }
.choice:hover { border-color: var(--accent); }
.choice.is-selected { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 650; }
.choice-row .choice { flex: 0 0 auto; }
[data-disabled="1"] .choice { cursor: not-allowed; }
/* Data rows as cards on a phone. Same shape as the Assets list, which reads well at that size. */
.list-row[data-card-row] { cursor: pointer; }
.list-row[data-card-row]:active { background: var(--surface-2); }
.list-row[data-card-row]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sensitivity review. The warnings are the point, so they are the loudest thing on the card. */
.tier-card { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tier-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tier-head .row-meta { display: block; margin-top: 2px; }
.tier-warning { margin: 8px 0 0; padding: 7px 10px; border-radius: 8px;
  background: color-mix(in srgb, #f6a800 12%, var(--surface)); color: var(--warning); font-size: 12px; font-weight: 650; }
.tier-members { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tier-member { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 13px; }
.tier-member.is-unknown { border-style: dashed; color: var(--muted); }
.tier-member .text-button { padding: 0 4px; font-size: 14px; }
.column-menu:hover { color: var(--text); }
.grid-add-col { width: 34px; text-align: center; }
.grid-add-col .text-button { font-size: 16px; padding: 2px 6px; }
/* Per-row save state. Deliberately quiet — a grid of loud badges is unreadable. */
.row-status { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: transparent; vertical-align: middle; }
.row-status[data-status="pending"] { background: var(--muted); }
.row-status[data-status="saving"] { background: var(--accent); }
.row-status[data-status="error"] { background: #e5484d; }
.address-field legend { padding: 0 5px; color: var(--muted); font-size: 13px; font-weight: 650; }
input:disabled, select:disabled, textarea:disabled, fieldset:disabled { opacity: .72; background: var(--surface-2); }
.table-scroll { overflow-x: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; }
.table-scroll table { width: 100%; min-width: 520px; border-collapse: collapse; }
.table-scroll th, .table-scroll td { padding: 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-scroll th { color: var(--muted); background: var(--surface-2); font-size: 11px; }
.table-scroll tr:last-child td { border-bottom: 0; }
.table-scroll .icon-button { width: 28px; height: 28px; font-size: 18px; }
.table-money { display: grid; grid-template-columns: minmax(90px, 2fr) 64px; gap: 5px; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.choice { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; }
.choice input { width: auto; margin: 0; }
.component-card { border: 1px dashed var(--line); border-radius: 12px; padding: 13px; color: var(--muted); font-size: 13px; }
.report-blockers { margin:8px 0 12px; padding-left:20px; color:var(--text); }
.report-blockers li + li { margin-top:5px; }
.agreement-card { margin: 18px 0; }
.agreement-card strong { color: var(--text); }
.payment-card { margin: 18px 0; color: var(--text); }
.payment-total { margin-top: 5px; font-size: 18px; font-weight: 750; }
.payment-card .button { margin-top: 11px; }
.commercial-card { margin: 18px 0; color: var(--text); }
.commercial-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.commercial-provider { color: var(--muted); font-size: 11px; text-transform: capitalize; }
.commercial-documents { display: grid; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.commercial-document { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }
.commercial-document:last-child { border-bottom: 0; }
.commercial-document strong, .commercial-document small { display: block; }
.commercial-document small { margin-top: 3px; color: var(--muted); }
.action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) { .wheel-detail-group .commercial-document .operation-actions { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; } }
.proposal-admin-card { margin: 12px 0; }
.proposal-request-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.proposal-request-summary strong, .proposal-request-summary small { display: block; }
.proposal-request-summary small { color: var(--muted); text-align: right; }
.commercial-lines { display: grid; gap: 9px; margin: 10px 0; }
.commercial-line { display: grid; grid-template-columns: minmax(0, 2fr) 72px 105px 75px 34px; gap: 7px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 11px; }
.commercial-line label { font-size: 11px; }
.commercial-line .icon-button { margin-bottom: 2px; }
.financial-line { grid-template-columns: minmax(0, 2fr) 72px 100px 100px 72px 34px; }
.financial-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 10px 0; }
.financial-summary > div { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.financial-summary span, .financial-summary small { color: var(--muted); font-size: 10px; }
.financial-summary strong { color: var(--text); font-size: 14px; }
.operations-section details { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.operations-section details summary { cursor: pointer; color: var(--text); font-size: 12px; font-weight: 700; }
.operations-section details summary span { color: var(--muted); font-weight: 500; }
.project-delivery { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.project-phase { margin-top: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.project-phase-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.project-phase-head strong, .project-phase-head small { display: block; }
.project-phase-head small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.project-milestone { padding-left: 14px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 38px; }
.checkbox-label input { width: auto; }
#commercial-error { margin: 12px 0 0; }
.refund-history { margin: 9px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.refund-warning { padding: 10px 11px; border-radius: 9px; background: color-mix(in srgb, var(--warning) 12%, var(--surface)); line-height: 1.45; }
.refund-fields { margin-top: 16px; }
#refund-error { margin: 12px 0 0; }
.setup-summary { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.setup-summary > span:last-child { color: var(--muted); font-size: 11px; }
.setup-state { justify-self: start; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.setup-state.ready { color: var(--success); background: color-mix(in srgb, var(--success) 11%, var(--surface)); }
.setup-state.action_required { color: var(--warning); background: color-mix(in srgb, var(--warning) 11%, var(--surface)); }
.setup-state.blocked { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.setup-items { display: grid; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.setup-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.setup-item:last-child { border-bottom: 0; }
.setup-indicator { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.setup-indicator.ready { background: var(--success); }
.setup-indicator.action_required, .setup-indicator.optional { background: var(--warning); }
.setup-indicator.blocked { background: var(--danger); }
.setup-item-heading { display: flex; justify-content: space-between; gap: 12px; }
.setup-item-heading span { color: var(--muted); font-size: 11px; text-transform: capitalize; }
.setup-item p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.setup-item .setup-action { color: var(--text); font-weight: 650; }
#setup-dialog .dialog-actions { position: sticky; bottom: -20px; padding-top: 12px; background: var(--surface); }
.property-preview { margin: 18px 0; color: var(--text); }
.property-preview summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.property-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.property-preview-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: var(--surface-2); }
.property-preview-grid figure { margin: 0; }
.property-preview-grid figcaption { margin-top: 5px; color: var(--muted); font-size: 11px; }
.preview-warning { padding: 9px 10px; border-radius: 8px; background: color-mix(in srgb, var(--warning) 12%, var(--surface)); color: var(--text); line-height: 1.4; }
.component-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.booking-preferences { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.booking-preferences li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.booking-preferences li strong { min-width: 0; overflow-wrap: anywhere; }
.booking-preferences .status { flex: 0 0 auto; }
.access-response { margin-top: 12px; }
.access-response p { margin-bottom: 0; }
.staff-picker { margin: 18px 0 0; padding: 0; border: 0; }
.staff-picker legend { margin-bottom: 9px; color: var(--muted); font-size: 13px; font-weight: 650; }
.staff-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.staff-option { display: flex; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--text); font-weight: 550; }
.staff-option input { width: auto; margin: 0; }
.staff-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card, .finding-card { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.media-card .row-meta { display: block; }
.media-card p { margin: 8px 0 0; line-height: 1.4; }
.finding-card { color: var(--text); }
.finding-card .status { float: right; }
.finding-card p { clear: both; margin-top: 7px; color: var(--muted); line-height: 1.4; }
.finding-editor { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; color: var(--text); }
.finding-editor summary { cursor: pointer; color: var(--accent); font-weight: 650; }
.inspection-video-review { margin-top: 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.detail-panel.inspection-workspace { --accent: #174f3b; width: min(1100px, 100%); background: #f3f6f3; }
.inspection-workspace .detail-top { align-items: center; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.inspection-workspace #back-to-job { display: inline-flex; min-height: 40px; align-items: center; margin-top: 8px; font-weight: 700; }
.inspection-review-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 7px; }
.inspection-review-actions .button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.inspection-review-actions .button.primary { background: #174f3b; border-color: #174f3b; }
.inspection-review-progress { border: 1px solid #dce4de; border-radius: 9px; background: #f1f5f2; color: #174f3b; padding: 8px 11px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.inspection-review-progress.ready { background: #174f3b; border-color: #174f3b; color: #fff; }
.inspection-property-summary { margin: 12px 0 14px; padding: 14px 15px; border: 1px solid #dce4de; border-radius: 12px; background: #fff; }
.inspection-property-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.inspection-property-summary-head > strong { font-size: 15px; }
.inspection-property-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.inspection-property-summary-grid > div { min-width: 0; padding-top: 8px; border-top: 1px solid #dce4de; }
.inspection-property-summary span, .inspection-property-summary strong { display: block; }
.inspection-property-summary span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.inspection-property-summary strong { margin-top: 2px; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
.inspection-property-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inspection-property-fields [data-field-wrapper]:nth-last-child(-n + 2) { grid-column: 1 / -1; }
.inspection-property-actions { flex: 0 0 auto; margin: 0; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.inspection-workspace .form-section { margin: 14px 0; padding: 16px 18px; border: 1px solid #dce4de; border-radius: 15px; background: #fff; }
.inspection-workspace .form-section > h3 { font-size: 17px; }
.inspection-workspace .inspection-finding-section { padding: 0; border: 0; background: transparent; }
.inspection-findings-workspace.component-card { border: 0; padding: 0; color: var(--text); }
.inspection-capture-bar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-bottom: 8px; padding: 0; }
.inspection-capture-bar .button { min-height: 40px; padding: 9px 14px; }
.inspection-capture-bar strong, .inspection-capture-bar span { display: block; }
.inspection-capture-bar span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.inspection-capture-bar .component-actions { flex: 0 0 auto; margin: 0; }
.inspection-workspace .inspection-video-review { margin-top: 16px; padding: 0; border: 0; background: transparent; }
.inspection-workspace .video-review-section { margin-top: 12px; }
.inspection-workspace .video-review-section > summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid #dce4de; border-radius: 12px; background: #fff; color: var(--text); cursor: pointer; list-style: none; }
.inspection-workspace .video-review-section > summary::-webkit-details-marker { display: none; }
.inspection-workspace .video-review-section > summary::after { content: "⌄"; grid-column: 3; color: #174f3b; font-size: 19px; line-height: 1; }
.inspection-workspace .video-review-section:not([open]) > summary::after { transform: rotate(-90deg); }
.inspection-workspace .video-review-section > summary strong { min-width: 0; font-size: 18px; }
.inspection-workspace .video-review-section > summary span { border-radius: 999px; padding: 4px 9px; background: #e3ebe5; color: #174f3b; font-size: 12px; font-weight: 700; white-space: nowrap; }
.inspection-workspace .video-review-section-body { display: grid; gap: 12px; margin-top: 10px; }
.inspection-workspace .video-review-issue { margin-top: 10px; padding: 16px; border-color: #dce4de; border-radius: 14px; box-shadow: 0 5px 18px rgba(23,33,27,.035); }
.inspection-workspace .video-review-heading strong { font-size: 18px; }
.inspection-finding-copy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #dce4de; }
.inspection-finding-copy span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.inspection-finding-copy p { line-height: 1.45; }
.inspection-finding-editor { margin-top: 14px; padding: 14px; border: 1px solid #dce4de; border-radius: 11px; background: #f8faf8; }
.inspection-finding-actions { padding-top: 4px; }
.inspection-confirmed-finding { margin-top: 12px; padding: 16px; box-shadow: 0 5px 18px rgba(23,33,27,.035); }
.inspection-confirmed-finding.excluded { border-style: dashed; opacity: .82; }
.inspection-retained-evidence { margin-top: 12px; }
.confirmed-finding-clips { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.confirmed-evidence-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.inspection-excluded-findings { margin-top: 18px; border: 1px solid #e8c75d; border-radius: 12px; background: #fff8d9; overflow: hidden; }
.inspection-excluded-findings > summary { cursor: pointer; padding: 13px 15px; font-weight: 750; }
.inspection-excluded-findings > summary span { margin-left: 5px; border-radius: 999px; padding: 3px 7px; background: #fff; }
.inspection-excluded-findings > div { padding: 0 12px 12px; }
.evidence-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 7px; }
.evidence-heading strong { font-size: 13px; }
.evidence-heading span { color: var(--muted); font-size: 11px; }
.candidate-frame-pool { margin-top: 10px; padding-top: 1px; border-top: 1px solid var(--line); }
.inspection-workspace .selected-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inspection-workspace .selected-evidence-grid .selected-evidence:only-child { grid-column: 1 / -1; }
.inspection-workspace .selected-evidence-grid .selected-evidence:only-child img { max-height: 460px; object-fit: contain; background: #111; }
.inspection-workspace .review-filmstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inspection-workspace .button.primary { background: #174f3b; border-color: #174f3b; }
.inspection-finding-dialog { width: min(620px, calc(100% - 24px)); }
.inspection-assist-panel { margin-bottom: 16px; padding: 14px; border: 1px solid #b8d2c2; border-radius: 12px; background: #f1f7f3; }
.inspection-assist-panel h3, .inspection-assist-panel p { margin: 0; }
.inspection-assist-panel p { margin-top: 3px; color: var(--muted); }
.inspection-assist-panel .work-field { margin-top: 12px; }
.inspection-assist-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inspection-capture-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.inspection-capture-options .button { justify-content: center; }
.inspection-manual-divider { display: flex; align-items: center; gap: 10px; margin: 15px 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.inspection-manual-divider::before, .inspection-manual-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.inspection-finding-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.inspection-finding-wide { grid-column: 1 / -1; }
.inspection-focus-evidence { animation: inspection-focus 1.35s ease; }
@keyframes inspection-focus { 0%,100% { box-shadow: none; } 35% { box-shadow: 0 0 0 4px #81aa91; } }
.inspection-workspace .form-actions { position: static; margin: 22px -18px -16px; background: #fff; backdrop-filter: none; }
.inspection-details { margin-top: 18px; border: 1px solid #dce4de; border-radius: 15px; background: #fff; overflow: hidden; }
.inspection-details > summary { cursor: pointer; padding: 16px 18px; font-size: 16px; font-weight: 750; list-style-position: inside; }
.inspection-details > .hint { margin: -6px 18px 10px; }
.inspection-details[open] > summary { border-bottom: 1px solid var(--line); }
.inspection-details .form-section { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.inspection-details .form-section + .form-section { border-top: 1px solid var(--line); }
.inspection-publication { margin-top: 18px; padding: 16px 18px; border: 1px solid #dce4de; border-radius: 15px; background: #fff; }
.inspection-publication > h3 { margin: 0 0 10px; }
.inspection-publication .component-card { margin: 0; }
.video-review-section { margin-top: 16px; }
.video-review-section > h5 { margin: 0 0 8px; font-size: .92rem; color: var(--muted); }
.video-review-issue.suggested-exclusion { border-style: dashed; }
.exclusion-reason { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.video-review-title, .video-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.video-review-title h4 { margin: 2px 0 0; font-size: 17px; }
.video-review-heading strong { display: block; margin-top: 2px; }
.video-review-issue { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.review-video { display: block; width: 100%; max-height: 360px; margin-top: 10px; border-radius: 10px; background: #000; }
.review-video-shell { position: relative; min-height: 180px; margin-top: 10px; border-radius: 10px; overflow: hidden; background: #000; }
.review-video-shell .review-video { margin-top: 0; min-height: 180px; }
.video-load-status { position: absolute; top: 8px; left: 8px; z-index: 1; max-width: calc(100% - 16px); padding: 4px 7px; border-radius: 6px; color: #fff; background: #000b; font-size: 11px; font-weight: 700; pointer-events: none; }
.video-load-status:empty { display: none; }
.review-video-source { min-width: 0; }
.load-review-video { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.capture-review-frame { width: 100%; min-height: 40px; margin-top: 6px; padding: 8px 10px; }
.preview-video, .preview-selected-frame { display: grid; place-items: center; min-height: 160px; color: #fff; background: linear-gradient(145deg, #27313d, #111821); }
.preview-selected-frame { border-radius: 10px; min-height: 220px; }
.current-frame-preview { display: grid; gap: 5px; margin-top: 10px; }
.selected-evidence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.selected-evidence { position: relative; margin: 0; min-height: 120px; border-radius: 10px; overflow: hidden; background: var(--surface-alt); }
.selected-evidence img { width: 100%; height: 100%; min-height: 120px; max-height: 260px; object-fit: cover; display: block; }
.remove-evidence { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 15px; background: rgba(0,0,0,.72); color: #fff; font-size: 20px; line-height: 1; }
.markup-evidence { position: absolute; left: 6px; bottom: 6px; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 9px; background: rgba(0,0,0,.78); color: #fff; font-weight: 700; }
.selected-evidence img { cursor: zoom-in; }
.image-zoom-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto 1fr; background: rgba(5,8,12,.96); color: #fff; }
.image-zoom-bar { display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: rgba(18,22,28,.96); }
.image-zoom-bar button { min-width: 42px; min-height: 40px; border: 0; border-radius: 9px; background: #303741; color: #fff; font-weight: 700; }
.image-zoom-bar .image-zoom-close { margin-left: auto; }
.image-zoom-stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.image-zoom-stage.dragging { cursor: grabbing; }
.image-zoom-stage img { position: absolute; left: 50%; top: 50%; max-width: min(92vw, 1400px); max-height: calc(100vh - 84px); transform-origin: center; user-select: none; -webkit-user-drag: none; }
.review-filmstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 5px; margin-top: 8px; overflow: hidden; }
.review-frame { position: relative; min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--surface-alt); aspect-ratio: 3 / 4; }
.review-frame.selected { border-color: var(--accent); }
.review-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-frame span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-size: 11px; }
.review-frame.asset-failed { opacity: .35; }
.review-frame-role { position: absolute; inset: auto 4px 4px; overflow: hidden; border-radius: 999px; padding: 3px 5px; background: rgba(0,0,0,.72); color: #fff; font-size: 9px; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.use-current-frame { width: 100%; margin-top: 8px; }
.complete-video-review { width: 100%; margin-top: 14px; }
.library-assist { margin: 10px 0; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--text); }
.library-assist > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent); font-weight: 700; }
.library-controls { margin-top: 8px; }
.library-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.library-controls input { min-height: 44px; font-size: 16px; }
.library-results { margin-top: 9px; }
.library-list { display: grid; gap: 8px; }
.library-card { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.library-card-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 8px; }
.library-card strong { overflow-wrap: anywhere; }
.library-card p { margin: 7px 0; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.library-card small { display: block; margin-bottom: 9px; color: var(--muted); }
.library-card .button { min-height: 44px; }
.library-star { width: 44px; height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--accent); cursor: pointer; font-size: 22px; }
.library-star:focus-visible, .library-card .button:focus-visible, .library-assist summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; margin: 22px -20px -28px; padding: 13px 20px max(13px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 8; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: .2s; border-radius: 999px; background: var(--text); color: var(--surface); padding: 9px 14px; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* The toast stays click-through -- it floats over the content and a plain
   message must not swallow a click meant for what is underneath. But toastUndo
   puts a BUTTON in it, and pointer-events: none is inherited, so that button was
   never clickable: a click at its centre hit <html>. The only way back from a
   deleted row was decorative for as long as it has existed. Re-enable pointer
   events on the button alone, so the message stays transparent to clicks. */
.toast button { pointer-events: auto; }
@media (max-width: 650px) {
  .app-shell { padding: 13px 13px 36px; }
  input, select, textarea { font-size: 16px; }
  .inspection-workspace .detail-top { display: grid; grid-template-columns: minmax(0,1fr) auto; padding-bottom: 9px; }
  .inspection-workspace .detail-top > div:first-child { grid-column: 1; }
  .inspection-workspace .detail-top > .icon-button { grid-column: 2; grid-row: 1; }
  .inspection-review-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
  .inspection-review-actions .button { min-width: 0; justify-content: center; padding: 6px 7px; font-size: 11px; }
  .inspection-review-progress { padding: 7px; font-size: 11px; }
  .inspection-property-summary { padding: 12px; }
  .inspection-property-summary-grid, .inspection-property-fields { grid-template-columns: 1fr; }
  .inspection-property-fields [data-field-wrapper]:nth-last-child(-n + 2) { grid-column: auto; }
  .inspection-capture-bar { align-items: stretch; }
  .inspection-workspace .form-section { padding: 13px; }
  .inspection-workspace .inspection-finding-section { padding: 0; }
  .inspection-workspace .form-actions { margin: 22px -13px -13px; }
  .inspection-workspace .video-review-issue { padding: 13px; }
  .confirmed-finding-clips { grid-template-columns: 1fr; }
  .inspection-finding-copy { grid-template-columns: 1fr; gap: 12px; }
  .inspection-workspace .selected-evidence-grid { grid-template-columns: 1fr; }
  .inspection-workspace .selected-evidence-grid .selected-evidence:only-child { grid-column: auto; }
  .inspection-workspace .review-filmstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inspection-assist-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inspection-assist-actions .button { justify-content: center; min-width: 0; }
  .inspection-assist-actions .button.primary { grid-column: 1 / -1; grid-row: 1; }
  .inspection-finding-fields { grid-template-columns: 1fr; }
  .inspection-finding-wide { grid-column: auto; }
  .topbar { display: block; }
  .topbar-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 8px; gap: 4px; }
  .topbar-actions .button { min-width: 0; min-height: 36px; justify-content: center; padding: 5px 7px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .view-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: visible; }
  .view-tab { min-width: 0; padding: 10px 2px; font-size: 12px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #report-studio-link { display: none !important; }
  .view-tab.active::after { inset: auto 5px -2px; }
  /* On a phone the detail NAME is what tells you which row you are editing, so it gets equal
     room. At desktop widths the value column stays wider, where there is space for both. */
  .attribute-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 6px; }
  .filters { display: grid; grid-template-columns: .55fr 1.15fr 1.3fr .8fr 1.2fr; gap: 4px; overflow: visible; }
  .filters.pipeline-filters { grid-template-columns: .55fr 1.1fr 1.05fr 1.35fr 1.05fr; }
  .filter { min-width: 0; padding: 6px 3px; font-size: 11px; text-align: center; }
  .list-row { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 9px; }
  .list-row .row-title { display: -webkit-box; overflow: hidden; white-space: normal; line-height: 1.3;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .list-row .row-cell { display: none; }
  .customer-row { grid-template-columns: minmax(0, 1fr) auto; }
  .customer-row .status { display: inline-flex; }
  .pipeline-board { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: minmax(0, 1fr); gap: 14px; overflow: visible; padding-bottom: 0; }
  .pipeline-column { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .pipeline-column:not(.has-deals) { display: none; }
  .pipeline-column.pipeline-stage-selected-empty { display: block; }
  .customer-row-actions { flex-direction: column; align-items: flex-end; gap: 7px; }
  .view-toolbar { align-items: flex-start; }
  .field-grid { grid-template-columns: 1fr; }
  .staff-options { grid-template-columns: 1fr; }
  .property-preview-grid { grid-template-columns: 1fr; }
  .dispatch-summary { grid-template-columns: repeat(3, 1fr); }
  .dispatch-stat { padding: 9px; }
  .dispatch-stat strong { font-size: 18px; }
  .project-board { grid-template-columns: minmax(0, 1fr); overflow: visible; padding-bottom: 0; }
  .project-column { min-width: 0; }
  .project-column:not(.has-projects) { display: none; }
  .pipeline-board { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: minmax(0, 1fr); gap: 14px; overflow: visible; padding-bottom: 0; }
  .pipeline-column { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .pipeline-column:not(.has-deals), .pipeline-column.pipeline-stage-filtered-out { display: none; }
  .pipeline-column.pipeline-stage-selected-empty { display: block; }
  .pipeline-column-head { margin: 0 2px 7px; padding: 0 2px; }
  .pipeline-card { gap: 9px; margin-top: 7px; padding: 13px 14px; border-radius: 12px; }
  .pipeline-card-head { align-items: flex-start; }
  .pipeline-card-head strong { white-space: normal; line-height: 1.3; }
  .pipeline-card-head span { flex-shrink: 0; border-radius: 999px; padding: 3px 7px; background: var(--surface-2); color: var(--accent); font-weight: 700; }
  .pipeline-card p { margin: 0; font-size: 12px; line-height: 1.35; }
  .pipeline-card-meta { justify-content: flex-start; gap: 14px; font-size: 12px; }
  .project-summary { gap: 12px; overflow-x: auto; white-space: nowrap; }
  .commercial-line { grid-template-columns: 1fr 1fr; }
  .commercial-line label:first-child { grid-column: 1 / -1; }
  .financial-line { grid-template-columns: 1fr 1fr; }
  .financial-summary { grid-template-columns: 1fr 1fr; }
  .operations-heading { align-items: flex-start; flex-wrap: wrap; }
  .operations-heading h3 { flex: 1 1 100%; }
  .operations-heading .operation-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
  .operations-list .operation-row { align-items: flex-start; flex-wrap: wrap; }
  .operations-list .operation-row > span:first-child { flex: 1 1 100%; }
  .operations-list .operation-row > .operation-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
  .engagement-metrics { grid-template-columns: 1fr 1fr; }
  .engagement-recent p { grid-template-columns: auto 1fr; }
  .engagement-recent p > small { grid-column: 2; text-align: left; }
  .library-card .button { width: 100%; }
  /* The [open] selector outranks component-specific desktop width classes, keeping every
     mobile task and editor on one canonical full-screen presentation. */
  dialog[open] {
    inset: 0;
    margin: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;margin-top:16px}
.service-card{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:12px;background:var(--surface);color:inherit;text-align:left;cursor:pointer}
.service-card:hover{border-color:var(--accent)}
.service-card.severity-high,.service-card.severity-critical{border-left-color:#d13438}
.service-card.severity-medium{border-left-color:#f7630c}
.service-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.service-card-head>span:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.service-card-head small{color:var(--muted)}
.service-card-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:.86rem}
.report-preview-dialog { width:min(1100px,calc(100vw - 24px)); height:min(920px,calc(100dvh - 24px)); padding:0; border:0; border-radius:16px; overflow:hidden; }
.report-preview-dialog::backdrop { background:rgba(12,27,23,.55); }
.report-preview-header { height:52px; display:flex; align-items:center; justify-content:space-between; padding:8px 12px 8px 18px; border-bottom:1px solid var(--line); background:white; }
.report-preview-header strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-preview-header .icon-button { flex:0 0 auto; }
.report-preview-dialog iframe { display:block; width:100%; min-width:0; max-width:100%; height:calc(100% - 52px); border:0; background:white; }

/* ── Site plans: the equipment-placement canvas ─────────────────────────── */
.site-plan-canvas { position: relative; width: min(100%, 720px); aspect-ratio: 1 / 1;
  margin: 0 auto; border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
  box-shadow: var(--shadow); touch-action: none; }
.site-plan-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-user-drag: none; user-select: none; }
.site-plan-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-plan-attrib { position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, .8); pointer-events: none; }
.site-plan-controls { gap: 12px; flex-wrap: wrap; }
.site-plan-controls label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.site-plan-controls input { width: 84px; }

.site-plan-canvas.site-plan-live { touch-action: auto; }

/* Mid-sign-in, /work/ is only the OAuth landing point — the Jobs UI is not what
   the user asked for and must not paint before the redirect onward. */
html[data-auth-callback="pending"] #app { display: none; }
html[data-auth-callback="pending"] #auth-callback-veil { display: flex; }
.auth-callback-veil {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: #f4f7f8;
  font: 500 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #55636b;
}

/* ── Timesheets ─────────────────────────────────────────────────────────── */
.timesheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.timesheet-nav { display: flex; align-items: center; gap: 6px; }
.timesheet-nav > div { min-width: 150px; text-align: center; }
.timesheet-nav strong { display: block; font-size: 16px; }
.timesheet-nav small { color: var(--muted); font-size: 12px; }
.timesheet-nav .text-button { padding: 4px 10px; font-size: 20px; line-height: 1; }
.timesheet-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.timesheet-day { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.timesheet-day-head { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.timesheet-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.timesheet-entry:last-child { border-bottom: 0; }
.timesheet-entry-main { min-width: 0; }
.timesheet-entry-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timesheet-entry-main small { color: var(--muted); font-size: 12px; }
.timesheet-entry-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.timesheet-billable { padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); font-size: 11px; }
.timesheet-note { margin-bottom: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--warning) 8%, var(--surface)); font-size: 13px; }
.timesheet-hint { margin-top: 6px; color: var(--muted); font-size: 13px; }
.timesheet-submit { width: 100%; margin-top: 6px; }
.timesheet-review { margin-top: 26px; }
.timesheet-review h2 { margin-bottom: 9px; font-size: 15px; }
.timesheet-review-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.timesheet-review-row small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 620px) {
  .timesheet-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timesheet-review-row { flex-direction: column; align-items: stretch; }
}

/* ── Project timeline (Gantt) ──────────────────────────────────── */
.gantt-host { margin-top: 14px; }
.gantt-scroll { overflow-x: auto; padding-bottom: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.gantt-scale { display: flex; padding-left: 190px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.gantt-day { flex: 0 0 auto; width: var(--gantt-col, auto); padding: 5px 0; color: var(--muted); font-size: 10px; text-align: center; }
.gantt-weekend { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); }
.gantt-rows { min-width: calc(190px + var(--gantt-width)); }
.gantt-row { display: flex; align-items: center; min-height: 34px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.gantt-row:last-child { border-bottom: 0; }
.gantt-label { flex: 0 0 190px; min-width: 0; padding: 4px 10px; }
.gantt-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.gantt-label-task strong { padding-left: 12px; font-weight: 400; }
.gantt-label small { display: block; color: var(--muted); font-size: 11px; }
.gantt-label-task small { padding-left: 12px; }
.gantt-track { position: relative; flex: 1 1 auto; height: 26px; min-width: var(--gantt-width); }
.gantt-bar { position: absolute; top: 5px; height: 16px; border-radius: 5px; background: var(--accent); cursor: grab; touch-action: none; overflow: hidden; }
.gantt-bar.gantt-phase { height: 18px; top: 4px; background: var(--accent-pressed); }
.gantt-bar.gantt-dragging { cursor: grabbing; opacity: .75; }
.gantt-bar.gantt-critical { background: var(--danger); }
/* A derived start is a guess, so it is drawn as one. */
.gantt-bar.gantt-derived { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.32) 0 4px, transparent 4px 8px); }
.gantt-bar.gantt-done { opacity: .45; }
.gantt-progress { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.4); }
.gantt-unscheduled-note { color: var(--muted); font-size: 11px; line-height: 26px; }
.gantt-conflicts { margin-bottom: 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--warning) 8%, var(--surface)); font-size: 12px; }
.gantt-key { margin-top: 7px; color: var(--muted); font-size: 11px; }
.gantt-swatch { display: inline-block; width: 18px; height: 9px; margin: 0 3px 0 8px; border-radius: 3px; vertical-align: middle; background: var(--accent); }
.gantt-swatch.gantt-critical { background: var(--danger); }
.gantt-swatch.gantt-derived { background: var(--accent); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.32) 0 4px, transparent 4px 8px); }
.gantt-unscheduled { margin-top: 12px; }
.gantt-unscheduled h3 { margin-bottom: 6px; font-size: 13px; }
.gantt-unscheduled-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; margin-bottom: 5px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px; }
.gantt-unscheduled-row small { color: var(--muted); }
@media (max-width: 620px) {
  .gantt-label { flex-basis: 120px; }
  .gantt-scale { padding-left: 120px; }
  .gantt-rows { min-width: calc(120px + var(--gantt-width)); }
}
/* ── Cost centres ─────────────────────────────────────────────────────────── */
.cost-centre-report { margin-top: 20px; }
.cc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cc-head h2 { font-size: 15px; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 10px; }
.cc-row-main { min-width: 0; }
.cc-row-main strong { display: block; font-size: 13px; font-weight: 600; }
.cc-row-main small { display: block; color: var(--muted); font-size: 11px; }
.cc-row-meta { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
/* Effort sits beside revenue, never instead of it: a segment that reports only
   what it earned looks profitable whatever it consumed. */
.cc-effort { color: var(--muted); font-size: 12px; }
.cc-new { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.cc-new legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cc-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; margin-bottom: 5px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.cc-retired { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
/* ── Quoted vs actual ─────────────────────────────────────────────────────── */
.qva-summary { display: flex; gap: 10px; margin-bottom: 12px; }
.qva-summary .dispatch-stat { flex: 1 1 0; }
.qva-negative strong { color: var(--danger); }
.qva-line { padding: 9px 12px; margin-bottom: 7px; border: 1px solid var(--line); border-radius: 10px; }
.qva-line-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.qva-line-head strong { font-size: 13px; font-weight: 600; }
.qva-line-head span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.qva-line small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.qva-bar { height: 5px; margin-top: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.qva-bar i { display: block; height: 100%; background: var(--accent); }
/* An overrun is capped in the bar but never in the number: the bar runs out of
   room, the figure beside it does not. */
.qva-over { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.qva-over .qva-bar i { background: var(--danger); }
.qva-warning { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }

/* ── Team capacity ────────────────────────────────────────────────────────── */
.utilisation { margin-top: 22px; }
.util-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 10px; }
.util-name { flex: 1 1 auto; min-width: 0; }
.util-name strong { display: block; font-size: 13px; font-weight: 600; }
.util-name small { display: block; color: var(--muted); font-size: 11px; }
.util-bars { display: flex; align-items: center; gap: 8px; flex: 0 0 140px; }
.util-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.util-bar i { display: block; height: 100%; background: var(--accent); }
.util-figure { min-width: 34px; text-align: right; font-size: 12px; font-weight: 600; }
.util-over { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.util-over .util-bar i { background: var(--danger); }
.util-flag { color: var(--danger); font-size: 11px; font-weight: 600; white-space: nowrap; }
.util-soft { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* ── Estimates ────────────────────────────────────────────────────────────── */
.est-summary, .rev-summary { display: flex; gap: 10px; margin-bottom: 12px; }
.est-summary .dispatch-stat, .rev-summary .dispatch-stat { flex: 1 1 0; }
.est-negative strong, .rev-negative strong { color: var(--danger); }
.est-row, .rev-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 10px; }
.est-parent { background: var(--surface-2); }
.est-main, .rev-main { min-width: 0; }
.est-main strong, .rev-main strong { display: block; font-size: 13px; font-weight: 600; }
.est-main small, .rev-main small { display: block; color: var(--muted); font-size: 11px; }
.est-meta, .rev-meta { text-align: right; white-space: nowrap; }
.est-meta small, .rev-meta small { display: block; color: var(--muted); font-size: 11px; }
.est-remaining { font-size: 12px; font-weight: 600; }
/* An overrun is named, never shown as negative remaining — the two mean
   different things and only one of them prompts a conversation. */
.est-flag { color: var(--danger); }
.est-over { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.rev-closed { opacity: .7; }
.cc-admin-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-admin-actions { display: flex; gap: 6px; flex: 0 0 auto; }
/* ── Activities and time logging ──────────────────────────────────────────── */
.log-time-row { display: flex; gap: 10px; }
.log-time-row label { flex: 1 1 0; min-width: 0; }
.activity-breakdown { margin-top: 20px; }
.activity-summary { display: flex; gap: 10px; margin-bottom: 10px; }
.activity-summary .dispatch-stat { flex: 1 1 0; }
.activity-breakdown h2 { margin-bottom: 8px; font-size: 15px; }
.activity-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; }
.activity-row-main { min-width: 0; }
.activity-row-main strong { display: block; font-size: 13px; font-weight: 600; }
.activity-row-main small { display: block; color: var(--muted); font-size: 11px; }
/* Its own class, not .timesheet-billable: that badge is counted by the
   acceptance test on the entry rows, and reusing it here would silently make a
   passing assertion count this section too. */
.activity-billable { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600;
  color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.activity-row-meta { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
/* Unclassified time is called out rather than dressed up as a category: it is
   the number that says whether the rest of the report can be trusted. */
.activity-unclassified { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600;
  color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.activity-breakdown-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.activity-admin-new { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.activity-admin-new legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.activity-admin-group { margin-bottom: 10px; }
.activity-admin-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.activity-admin-group-head strong { font-size: 13px; }
.activity-admin-leaf { padding: 5px 10px 5px 20px; border-left: 2px solid var(--line); font-size: 13px; }
.activity-admin-empty { color: var(--muted); font-size: 11px; }
/* ── Rates ───────────────────────────────────────────────────────────────── */
.rate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rate-head h2 { font-size: 17px; }
.rate-head small { display: block; max-width: 62ch; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.rate-warning { margin-bottom: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--warning) 8%, var(--surface)); font-size: 13px; }
.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rate-row.rate-unpriced { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.rate-main { min-width: 0; }
.rate-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate-main small { color: var(--muted); font-size: 12px; }
.rate-figures { display: flex; flex: 0 0 auto; gap: 18px; }
.rate-figure { text-align: right; }
.rate-figure small { display: block; color: var(--muted); font-size: 11px; }
.rate-figure strong { font-size: 15px; }
@media (max-width: 620px) {
  .rate-row { flex-wrap: wrap; }
  .rate-figures { order: 3; width: 100%; justify-content: flex-start; }
}

.site-plan-runs { color: var(--muted, #5f6a6a); font-size: 0.85rem; align-self: center; }

/* The one sign-in page, identifier-first (externals plan, decision E-2). */
.bridgeconnect-identifier { display: grid; gap: .45rem; width: min(22rem, 100%); margin: 0 auto .6rem; text-align: left; }
.bridgeconnect-identifier-label { font-size: .8rem; font-weight: 600; color: var(--muted, #667085); }
.bridgeconnect-identifier input, .bridgeconnect-code-step input { font: inherit; padding: .65rem .8rem; border: 1px solid #d0d5dd; border-radius: 8px; width: 100%; }
.bridgeconnect-continue-button { font: inherit; font-weight: 650; padding: .65rem 1rem; border-radius: 8px; border: 1px solid var(--brand, #3156d9); background: var(--brand, #3156d9); color: #fff; cursor: pointer; }
.bridgeconnect-continue-button:disabled { opacity: .6; cursor: default; }
.bridgeconnect-code-step { display: grid; gap: .45rem; width: min(22rem, 100%); margin: 0 auto .6rem; text-align: left; }
/* The steps are revealed one at a time by the `hidden` attribute. A class that sets
   `display` outranks the browser's own [hidden] rule, so without this line every step
   (Microsoft, the code box, both buttons) rendered at once on load. */
.bridgeconnect-code-step[hidden] { display: none; }
/* The quiet way out of a route we guessed. Deliberately not a second primary button:
   it is the exception, and a page with two equal buttons is the confusion this replaced. */
.bridgeconnect-auth-alt { display: block; width: min(22rem, 100%); margin: .55rem auto 0; padding: .35rem; border: 0; background: none; color: var(--muted, #667085); font-size: .82rem; text-decoration: underline; cursor: pointer; }
.bridgeconnect-auth-alt:hover { color: var(--ink, #101828); }
.bridgeconnect-auth-or { display: flex; align-items: center; gap: .75rem; width: min(22rem, 100%); margin: .4rem auto; color: var(--muted, #667085); font-size: .8rem; }
.bridgeconnect-auth-or::before, .bridgeconnect-auth-or::after { content: ""; flex: 1; border-top: 1px solid #e4e7ec; }

/*
 * Touch targets.
 *
 * ConForm is a website now, and everything outside the process canvas is expected
 * to work on a phone. Measured at 390px before this existed: the filter buttons on the
 * work list were 29px tall, the tab buttons on manage 17-30px, the register toggles 30px
 * and the shell breadcrumb 31px. The usual floor is 44px, and a 29px control is a control
 * people miss and re-tap.
 *
 * Gated on the pointer, not the width: `(hover: none) and (pointer: coarse)` is true on a
 * phone and false in a narrow desktop window, so this cannot change a mouse layout that
 * someone has already tuned. Deliberately not applied to checkboxes and radios, whose
 * hit area comes from their label, nor to the skip link, which is 1x1 until focused by
 * design.
 */
@media (hover: none) and (pointer: coarse) {
  button,
  [role="button"],
  a.button,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 44px !important;
  }
  a.button, .button {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  a.skip-link { min-height: 0 !important; display: inline; }
}

/* A second factor, asked for once, where a tenant's policy requires it. */
.mfa-panel { position: fixed; inset: 0; background: rgba(20, 28, 36, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.mfa-card { background: var(--surface, #fff); color: inherit; border-radius: 8px; padding: 24px; max-width: 420px; width: 100%; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
.mfa-card h2 { margin: 0 0 8px; font-size: 18px; }
.mfa-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.mfa-qr { display: block; width: 200px; height: 200px; margin: 8px auto 12px; background: #fff; border-radius: 4px; }
.mfa-secret code { font-size: 12px; word-break: break-all; }
.mfa-card label { display: block; font-size: 13px; margin-bottom: 4px; }
.mfa-card input { width: 100%; font-size: 20px; letter-spacing: 0.2em; padding: 8px 10px; box-sizing: border-box; }
.mfa-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Your sign-ins, and who is in this organisation. */

.account-panel { position: fixed; inset: 0; background: rgba(20, 28, 36, 0.55); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding: 32px 16px; overflow: auto; }
.account-card { background: var(--surface, #fff); color: inherit; border-radius: 8px; padding: 20px 24px 24px; max-width: 960px; width: 100%; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
.account-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.account-head h2 { margin: 0; font-size: 18px; }
.account-body h3 { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; margin: 20px 0 8px; opacity: 0.8; }
.account-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.account-table th, .account-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(127, 127, 127, 0.25); vertical-align: top; }
.account-table tr.account-review td { background: rgba(255, 193, 7, 0.12); }
.account-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: rgba(127, 127, 127, 0.18); margin-left: 4px; }
.account-list { padding-left: 1.2em; font-size: 13px; }
.account-list li { margin-bottom: 4px; }
.account-muted { font-size: 12px; opacity: 0.75; }
.account-invite { display: flex; gap: 8px; margin-bottom: 8px; }
.account-invite input { flex: 1; padding: 6px 8px; }
.account-policy label { display: block; font-size: 13px; margin-bottom: 8px; }
.account-policy input[type=number] { width: 80px; }
.button.small { font-size: 12px; padding: 2px 8px; }

/* Which organisation? — asked once on the way into ConForm. */
.bridgeconnect-tenant-choice { display: grid; gap: .6rem; margin-top: .75rem; }
.bridgeconnect-tenant-choice .bridgeconnect-continue-button { text-align: left; }
/* Account panel: linking and notices. */
.account-link { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.account-link form { flex-basis: 100%; }
.account-notice { padding: .5rem .75rem; border-radius: 6px; background: var(--accent-soft, #e8f1fb); color: inherit; }

.commercial-catalogue { display: grid; gap: 9px; min-width: 0; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.commercial-catalogue legend { padding: 0 5px; font-size: 13px; font-weight: 600; }
.commercial-catalogue .button { justify-self: start; }
.commercial-catalogue .hint { margin: 0; }

/* Configured wheel-repair intake, shared dialog primitives. */
#wheel-intake-dialog { width: min(760px, calc(100vw - 24px)); }
.wheel-repair-row { display: grid; grid-template-columns: minmax(0, 1fr) 145px 85px 28px; gap: 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--border, #ddd); }
.wheel-delivery { display: flex; flex-wrap: wrap; gap: 24px; margin: 24px 0; }
.wheel-delivery label { display: flex; align-items: center; gap: 8px; }
.wheel-delivery input { width: auto; }
.wheel-options button { display: block; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.wheel-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.wheel-job-panel { width: min(640px, 100%); background: #f6f8fb; padding-inline: 24px; }
.wheel-job-panel .detail-top { margin-inline: -24px; padding-inline: 24px; background: #fff; }
.wheel-job-panel .detail-number { color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .06em; }
.wheel-job-panel h2 { margin-top: 5px; font-size: clamp(20px, 3vw, 25px); line-height: 1.18; }
.wheel-detail { display: grid; gap: 14px; padding: 20px 0 10px; }
.wheel-overview { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; }
.wheel-overview .status { border: 1px solid #c9e0f4; background: #eaf5ff; color: #075384; padding: 6px 11px; font-weight: 750; }
.wheel-overview .status.completed, .wheel-overview .status.archived { border-color: #b9dec7; background: #e8f6ed; color: #146039; }
.wheel-overview .status.cancelled { border-color: #ead2d2; background: #fff0f0; color: #9e2b2b; }
.wheel-hold { border-radius: 999px; padding: 6px 10px; background: #fff0d8; color: #7a4800; font-weight: 700; }
.wheel-overview-meta { margin-left: auto; }
.wheel-identity { display: grid; gap: 5px; overflow-wrap: anywhere; padding: 15px 17px; border: 1px solid #e0e7f0; border-radius: 14px; background: #fff; }
.wheel-identity-label { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.wheel-identity strong { font-size: 15px; }
.wheel-contact { display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: 13px; }
.wheel-contact a { color: #075b96; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.wheel-next-card, .wheel-work-card { min-width: 0; padding: 19px 20px; border: 1px solid #e0e7f0; border-radius: 14px; background: #fff; }
.wheel-next-card { border-color: #a9cbe8; border-left: 4px solid var(--accent); background: #f7fbff; box-shadow: 0 6px 22px rgb(11 66 119 / 6%); }
.wheel-eyebrow { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.wheel-next-card h3 { margin: 6px 0 0; font-size: 20px; line-height: 1.25; }
.wheel-work-card h3 { margin: 3px 0 0; font-size: 18px; line-height: 1.3; }
.wheel-next-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.wheel-next-card form { margin-top: 12px; }
.wheel-next-card form:empty { display: none; }
.wheel-next-card form p { margin: 0; }
.wheel-next-card form label { margin: 10px 0; }
.wheel-next-card form .button { margin-top: 10px; }
.wheel-next-card [role="alert"]:empty { display: none; }
.wheel-next-card [role="alert"] { color: var(--danger); }
.wheel-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wheel-repair-list { display: grid; gap: 0; margin: 15px 0 0; padding: 0; list-style: none; font-size: 14px; }
.wheel-repair-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #edf0f4; }
.wheel-repair-list li strong { white-space: nowrap; color: var(--muted); font-size: 13px; }
.wheel-work-card .wheel-notes { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.wheel-notes-heading { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 750; }
.wheel-note-list { margin: 6px 0 0; padding: 0; list-style: none; }
.wheel-note { padding: 8px 0; border-bottom: 1px solid var(--line); }
.wheel-note:last-child { border-bottom: 0; }
.wheel-note p { margin: 0 0 3px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wheel-note small { color: var(--muted); font-size: 11px; }
.wheel-work-card > .hint { margin: 8px 0 0; }
.wheel-detail-group { min-width: 0; border: 1px solid #e0e7f0; border-radius: 14px; padding: 0 18px; background: #fff; }
.wheel-detail-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 0; cursor: pointer; font-size: 14px; font-weight: 750; }
.wheel-detail-group > summary::marker { content: ''; }
.wheel-detail-group > summary::-webkit-details-marker { display: none; }
.wheel-detail-group > summary small { color: var(--muted); font-size: 12px; font-weight: 500; text-align: right; }
.wheel-detail-group > summary::after { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-right: 2px solid #62758a; border-bottom: 2px solid #62758a; transform: rotate(45deg); transition: transform .15s ease; }
.wheel-detail-group[open] > summary::after { transform: rotate(225deg); }
.wheel-detail-group[open] > summary { border-bottom: 1px solid var(--line); }
.wheel-detail-group > .operations-section { margin: 12px 0; }
.wheel-detail-group .component-card { margin: 12px 0; }
.wheel-detail-group .action-row { margin: 12px 0; }
.wheel-older-documents { margin-top: 12px; font-size: 12px; }
.wheel-older-documents summary { cursor: pointer; }
.wheel-detail-group .commercial-document { flex-wrap: wrap; }
.wheel-transport-leg { padding: 13px 0; border-top: 1px solid #e8edf3; }
.wheel-transport-leg:first-child { border-top: 0; padding-top: 0; }
.wheel-transport-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wheel-transport-heading strong { font-size: 14px; }
.wheel-transport-status { border-radius: 999px; padding: 4px 8px; background: #edf4fa; color: #174e7a; font-size: 12px; font-weight: 650; text-transform: capitalize; }
.wheel-transport-date { margin: 6px 0 0; font-size: 14px; font-weight: 650; }
.wheel-transport-leg .hint { margin: 4px 0 0; font-size: 12px; }
.wheel-transport-leg label { margin-top: 12px; }
.wheel-transport-leg .button { margin-top: 12px; }
@media (max-width: 600px) { .wheel-job-panel { padding-inline: 16px; } .wheel-job-panel .detail-top { margin-inline: -16px; padding-inline: 16px; } .wheel-next-card, .wheel-work-card { padding: 17px; } .wheel-detail-group { padding: 0 15px; } .wheel-overview-meta { flex-basis: 100%; margin-left: 0; } }
@media(max-width:600px) { .wheel-repair-row { grid-template-columns: 1fr 1fr; } }

#wheel-intake-dialog .dialog-body > h3 { margin: 24px 0 4px; }
.wheel-repair-type { min-width: 0; display: grid; gap: 8px; }
.wheel-repair-description[hidden] { display: none; }
.wheel-customer-field { min-width: 0; position: relative; }
.wheel-customer-field .wheel-options:not(:empty) { position: absolute; z-index: 2; top: 100%; left: 0; right: 0; padding: 4px; background: var(--surface, white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px #0002; }
.route-address-field { position: relative; min-width: 0; }
.route-address-options:not(:empty) { position: absolute; z-index: 9; top: 100%; left: 0; right: 0; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.wheel-manage, .wheel-data-credit { margin-top: 12px; font-size: 12px; color: var(--muted); }
.wheel-manage summary, .wheel-data-credit summary { cursor: pointer; }
.wheel-manage .button { margin: 8px 4px 0 0; }
@media(max-width:600px) { .wheel-repair-row { grid-template-columns: minmax(0, 1fr) 72px 28px; } .wheel-repair-type { grid-column: 1 / -1; } }

/* Verified customer-domain branding uses the same Work shell. */
.work-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 14px; font-weight: 650; color: var(--muted); }
.work-brand img { max-width: 140px; height: 32px; object-fit: contain; }
.tenant-work-entry .bridgeconnect-continue-button { background: var(--accent); }
.tenant-work-entry .bridgeconnect-auth { max-width: 420px; margin: 48px auto; }

/* Compact wheel workspace shared by any tenant using the minimal lifecycle. */
.wheel-workspace { --bg: #f3f6fa; --surface-2: #f5f8fc; --text: #14243b; --muted: #536579; --line: #dbe4ee; }
.wheel-workspace .app-shell { width: min(1120px, 100%); }
.wheel-workspace .topbar { padding: 8px 0 16px; border-bottom: 1px solid var(--line); }
.wheel-workspace .work-brand { gap: 11px; margin-bottom: 3px; color: var(--text); font-size: 14px; font-weight: 750; }
.wheel-workspace .work-brand img { width: 46px; height: 46px; border-radius: 10px; background: var(--surface-2); object-fit: contain; }
.wheel-workspace h1 { font-size: 27px; }
.wheel-workspace .view-tabs { margin-top: 12px; }
.wheel-workspace .view-tab { padding: 13px 17px; font-weight: 600; }
.wheel-workspace .view-tab.active { color: var(--accent); }
.wheel-workspace .filters { display: flex; gap: 7px; overflow-x: auto; padding: 14px 0 15px; }
.wheel-workspace .filter { flex: 0 0 auto; padding: 8px 13px; font-size: 12px; }
.wheel-workspace .filter.active { border-color: var(--accent); background: var(--accent); }
.wheel-workspace .list { gap: 10px; }
.wheel-workspace .list-row { min-height: 76px; border-color: #dfe7ef; box-shadow: 0 2px 9px rgb(21 51 83 / 3%); }
.wheel-workspace .list-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, white); box-shadow: 0 5px 18px rgb(21 51 83 / 8%); }
.wheel-workspace .row-title { color: var(--text); font-size: 15px; }
.wheel-workspace .row-meta { color: #617286; }
.wheel-workspace #content > .operations-section { margin: 0 0 9px; }
.wheel-workspace #content > .operations-section > details { overflow: hidden; border: 1px solid #dfe7ef; border-radius: 12px; background: #fff; }
.wheel-workspace #content > .operations-section > details > summary { padding: 13px 16px; color: var(--text); font-size: 13px; font-weight: 750; cursor: pointer; }
.wheel-workspace #content > .operations-section > details[open] > summary { border-bottom: 1px solid var(--line); }
.wheel-workspace #content > .operations-section > details > :not(summary) { margin-inline: 16px; }
@media (max-width: 600px) {
  .wheel-workspace .app-shell { padding-inline: 14px; }
  .wheel-workspace .topbar { align-items: flex-start; }
  .wheel-workspace .work-brand img { width: 39px; height: 39px; }
  .wheel-workspace .work-brand span { max-width: 125px; line-height: 1.2; }
  .wheel-workspace h1 { font-size: 23px; }
  .wheel-workspace .topbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 13px; }
  .wheel-workspace .topbar-actions .button { padding-inline: 12px; }
  .wheel-workspace .view-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wheel-workspace .view-tab { padding: 11px 5px; font-size: 13px; }
}