/* Control Center (/app) live adapter styles. */

/* The prototype's persona switcher and sample-data controls do not apply to a real session. */
.live-mode .proto-bar { display: none !important; }

.live-badge {
  position: fixed; right: 12px; bottom: 12px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  font: 600 12px/1.2 'Inter', sans-serif;
  background: var(--surface, #fff); color: var(--text, #0F172A);
  border: 1px solid var(--border, #E2E8F0); box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.live-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; }
.live-badge.stale .dot { background: #D97706; }
.live-badge.down .dot { background: #DC2626; }
.live-badge small { font-weight: 500; opacity: .75; }

/* Appliance in monitor-only mode (PEAKLOGIC_CONTROL_ENABLED is not 1): say so once, quietly. */
/* One slim line each (user 2026-10-15: the banners must not take the top of the screen), with a close
   button that hides it for this browser session. */
.live-note {
  display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 16px; min-height: 28px;
  font-size: 12.5px; line-height: 1.3; color: var(--text-muted, #475569);
  background: var(--surface-2, #F1F5F9); border-bottom: 1px solid var(--border, #E2E8F0);
}
.live-note svg { flex: none; width: 14px; height: 14px; }
.live-note > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-note .btn-sm { padding: 2px 8px; min-height: 0; font-size: 12px; }
.live-note .note-close { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; }
.live-note .note-close:hover { background: var(--surface-3, #E2E8F0); }

/* Staff entered into a customer, or with one picked above a build tool: whose modules the menu shows (cloud tier C6). */
.act-as.act-as-note { margin-top: 4px; padding: 6px 16px; background: var(--surface-2, #F1F5F9); color: var(--text-muted, #475569); font-size: 12.5px; }
.staff-modules-note { display: inline; color: var(--text-muted, #475569); font-size: 12.5px; }
.staff-modules-note .btn-link { background: none; border: 0; padding: 0; color: var(--accent-ink, #6D28D9); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* The Modules panel on an organization's page (cloud tier C6). */
.mod-group-title { margin: 0; padding: 14px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #475569); }
.mod-list { list-style: none; margin: 0; padding: 0; }
.mod-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border, #E2E8F0); }
.mod-row:first-child { border-top: 0; }
.mod-row .mod-name { font-weight: 600; }
.mod-row .mod-desc { color: var(--text-muted, #475569); font-size: 12.5px; }
.mod-live { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 8px; white-space: nowrap; }
.mod-live.on { background: #DCFCE7; color: #166534; }
.mod-live.off { background: var(--surface-3, #E2E8F0); color: var(--text-muted, #475569); }
/* New customer / New partner: the same switches; the header and buttons stay put while the body scrolls. */
.modal.org-new { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; }
.modal.org-new .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.org-new-modules { border: 1px solid var(--border, #E2E8F0); border-radius: 8px; }
.org-new-modules > .mod-head { padding: 12px 14px 0; }
.org-new-modules > .mod-head h3 { margin: 0; font-size: 14px; }
@media (max-width: 600px) {
  .modal.org-new { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .modal.org-new .modal-body { padding: 14px 12px; }
  .org-new-modules .mod-row { padding: 10px; gap: 4px 10px; }
  .org-new-modules .mod-live { margin-left: 6px; }
}

/* Map with no placed site (components.js LiveMap). */
.map-empty { position: absolute; inset: auto 12px 12px 12px; z-index: 500; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: var(--surface, #fff); border: 1px solid var(--border, #E2E8F0); }

/* Expanded alarm (live AlarmContext): notes and the point's history. */
.live-ctx { display: grid; gap: 12px; }
.live-ctx .live-notes, .live-ctx .live-history { display: grid; gap: 4px; }
.live-ctx form.row { margin-top: 6px; gap: 8px; flex-wrap: nowrap; }
.live-ctx form.row .input { flex: 1; min-width: 0; }

/* PeakView360 (live/peakview.js): screen chips and the screen frame. */
/* The screen buttons stay put under the top bar while the page moves (user 2026-10-15), and the
   frame fills the rest of the window: a long screen scrolls inside it, never the buttons away. */
.pv-screens { gap: 6px; margin: 4px 0 8px; flex-wrap: wrap; position: sticky; top: var(--top-h, 56px); z-index: 15;
  padding: 6px 0; background: var(--bg, var(--surface, #0b1120)); }
.pv-screens .chip { cursor: pointer; }
.pv-frame { position: relative; width: 100%; height: calc(100vh - var(--top-h, 56px) - 120px); min-height: 420px; border: 1px solid var(--border, #E2E8F0); border-radius: 10px; overflow: hidden; background: #0b1120; margin-bottom: 14px; }
.pv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Engineering: a real tool framed in the shell (Tag tables, SVG editor, Panel Builder). */
.live-tool-frame { display: block; width: 100%; height: calc(100vh - 230px); min-height: 520px; border: 1px solid var(--border, #E2E8F0); border-radius: 10px; background: var(--surface, #fff); margin-top: 10px; }
@media (max-width: 720px) { .live-tool-frame { height: calc(100vh - 180px); } }
/* Framed tools and Site operations end at the window's bottom edge, measured from where they start
   (live.js fitFramesToWindow sets the height), so the page around them never scrolls and the tool's
   own menus stay in view (user 2026-10-15: Facility Builder's menus scrolled away). */
.live-tool-frame[data-fit="window"], .pv-frame[data-fit="window"] { min-height: 420px; margin-bottom: 8px; }

/* Menus anchored (user 2026-10-15, "review all other menus"): every page's tab row stays under the
   top bar while the page scrolls. Not inside dialogs, which scroll on their own. */
.main .tabs { position: sticky; top: var(--top-h, 56px); z-index: 14; background: var(--bg, #F5F5FB); }
.main .dash-tabs { position: sticky; top: var(--top-h, 56px); z-index: 14; background: var(--bg, #F5F5FB); }
.main .dash-tabs .tabs, .modal .tabs, .main .modal .tabs { position: static; z-index: auto; }

/* Estimator (staff pre-sales tool, live/estimator.js). */
.est-head-btn { position: relative; }
.topbar-tools { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.est-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--p1); color: #fff; }
.est-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-top: 12px; }
.est-main { display: grid; gap: 16px; min-width: 0; }
.est-side { min-width: 0; }
.est-sticky { position: sticky; top: 72px; }
@media (max-width: 1100px) { .est-layout { grid-template-columns: minmax(0, 1fr); } .est-sticky { position: static; } }
.est-num { color: var(--text-muted); font-weight: 600; margin-right: 6px; }
.est-text { width: 100%; resize: vertical; font: inherit; }
.est-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.est-lines .input { height: 28px; min-height: 0; padding: 2px 6px; font-size: 13px; border-radius: 6px; }
.est-n { width: 66px; text-align: right; }
.est-p { width: 120px; text-align: right; }
.est-name { width: 100%; min-width: 190px; }
.est-lines td { padding-top: 3px; padding-bottom: 3px; }
.est-lines td { vertical-align: middle; }
.est-area td { background: var(--surface-2); }
.est-area-name { font-weight: 600; width: auto; min-width: 260px; padding: 4px 6px; margin-right: 10px; }
.est-low td:first-child { box-shadow: inset 3px 0 0 var(--p1); }
.est-bad { color: var(--p1-ink, var(--p1)); font-weight: 600; }
.est-warn { color: var(--p3-ink, var(--p3)); }
.est-good { color: #16A34A; }
.est-row { cursor: pointer; }
.est-row:hover td { background: var(--surface-2); }
.est-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
@media (max-width: 700px) { .est-cols { grid-template-columns: 1fr; } }
.est-issues { margin: 10px 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; }
.est-approval { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; display: grid; gap: 8px; }
.est-ap-not_needed, .est-ap-approved { background: rgba(22, 163, 74, .12); color: #15803D; }
.est-ap-required, .est-ap-rejected { background: var(--p1-soft); color: var(--p1-ink, var(--p1)); }
.est-ap-pending { background: var(--p3-soft); color: var(--p3-ink, var(--p3)); }
.est-dirty { background: var(--p3-soft); color: var(--p3-ink, var(--p3)); }
.est-history { margin-top: 12px; font-size: 12px; }
.est-history ul { padding-left: 16px; display: grid; gap: 3px; }
.est-signoff { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.est-req { font-size: 11px; font-weight: 600; color: var(--p1-ink, var(--p1)); margin-left: 4px; }
.est-missing { border-color: var(--p1); }
/* Staff Messages (live/estimator.js). */
.msg-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .msg-layout { grid-template-columns: 1fr; } }
.msg-list { list-style: none; margin: 0; padding: 0; }
.msg-item { display: grid; gap: 3px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); cursor: pointer; font: inherit; }
.msg-item:hover, .msg-item.on { background: var(--surface-2); }
.msg-item.unread .msg-subj { font-weight: 700; }
.msg-item .chip { justify-self: start; }
.msg-statement { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--surface); font-size: 13px; line-height: 1.5; }
.est-h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 6px 0 4px; }
.est-forecast { margin-top: 14px; }
.est-forecast summary { cursor: pointer; margin-bottom: 8px; }
.est-override { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.est-pdf { width: 100%; height: 72vh; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.est-pay td { vertical-align: top; }
.est-years { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; display: grid; gap: 4px; font-size: 13px; }
.est-years-head { font-weight: 600; margin-bottom: 2px; }
.est-year { display: grid; grid-template-columns: 1fr auto 52px; gap: 8px; }
.est-year span:nth-child(2), .est-year span:nth-child(3) { text-align: right; }
.est-year-total { border-top: 1px solid var(--border); padding-top: 4px; font-weight: 600; }
.est-rowlabel { display: inline-flex; align-items: center; gap: 4px; }
.est-pay td { white-space: nowrap; }
.est-pay td:first-child { white-space: normal; }
/* Estimator money and percent inputs (same width, right-aligned, sign attached, no spinner). */
.est-adorn { display: inline-flex; align-items: center; width: 128px; height: 32px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); }
.est-adorn:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.est-adorn.bad { border-color: var(--p1); }
.est-adorn.disabled { opacity: .55; }
.est-adorn-sign { padding: 0 8px; color: var(--text-muted); font-size: 13px; }
.est-adorn input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); text-align: right; font: inherit; font-variant-numeric: tabular-nums; padding: 0 8px 0 4px; outline: none; }
.est-adorn-sign + input { padding-left: 0; }
.est-adorn input::placeholder { color: var(--text-muted); opacity: 1; }
.est-adorn input::-webkit-outer-spin-button, .est-adorn input::-webkit-inner-spin-button,
.est-lines input::-webkit-outer-spin-button, .est-lines input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-adorn input[type=number], .est-lines input[type=number] { -moz-appearance: textfield; }
.est-price td { vertical-align: middle; }
.est-price td:nth-child(5) { width: 64px; }
.est-price-total td { border-top: 1px solid var(--border-strong); }
.est-lines .est-n { width: 80px; font-variant-numeric: tabular-nums; }
.est-adorn input:focus, .est-adorn input:focus-visible { outline: none; box-shadow: none; border: 0; }
.est-pick { width: auto; min-width: 220px; height: 32px; min-height: 0; padding: 0 8px; }
.est-price .est-adorn { width: 118px; }
.est-breakdown { margin-top: 12px; }
.est-breakdown .tbl td { padding-top: 4px; padding-bottom: 4px; }

/* CMMS (live/cmms.js): the SLA clock on work orders; red once the response or resolution time is missed. */
.sla-chip { white-space: nowrap; }
.sla-chip svg { width: 13px; height: 13px; }
.sla-bad { background: var(--p1-soft); color: var(--p1-ink); }

/* CMMS configuration (live/cmmsconfig.js) and Outcomes (live/outcomes.js). A Multi is a group of
   checkboxes drawn as chips: keyboard and screen readers get a plain fieldset of checkboxes. */
.multi-field { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.multi-field legend { font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding: 0; margin-bottom: 4px; }
.multi { display: flex; flex-wrap: wrap; gap: 6px; }
.multi label { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; cursor: pointer; background: var(--surface-2); }
.multi label.on { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.multi input { margin: 0; }
.outcome-drill { border-top: 1px solid var(--border); padding-top: 10px; }
.outcome-drill ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kpi.clickable { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.kpi.clickable:hover { border-color: var(--accent-ink); }
.kpi .k-value.bad, .tbl td.bad { color: var(--p1-ink); }

/* CMMS C7: the PM calendar (live/cmms.js Schedule). A 7-column grid; a week view has taller days. */
.pm-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.pm-wd { padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface-2); text-transform: uppercase; letter-spacing: .03em; }
.pm-day { min-height: 92px; padding: 6px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-cal.week .pm-day { min-height: 220px; }
.pm-day.other { background: var(--surface-2); color: var(--text-muted); }
.pm-day.today .pm-n { background: var(--accent); color: #fff; }
.pm-day.late { box-shadow: inset 3px 0 0 var(--p1); }
.pm-n { align-self: flex-start; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-run { display: block; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font: inherit; font-size: 12px; line-height: 1.3; color: var(--text); background: var(--surface-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-run:hover { border-color: var(--accent-ink); }
.pm-run.open { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.pm-run.done { text-decoration: line-through; opacity: .7; }
.pm-run.missed { background: var(--p1-soft); color: var(--p1-ink); border-color: transparent; }
@media (max-width: 720px) { .pm-day { min-height: 64px; padding: 4px; } .pm-run { font-size: 11px; padding: 1px 4px; } }

/* CMMS C8: attachments on a work order (photos and PDFs). */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 12px 14px; }
.att-grid.compact { padding: 0; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.att { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.att img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.att-doc { display: flex; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 4 / 3; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 600; text-decoration: none; }
.att figcaption { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
.att figcaption .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* CMMS C9: the cloud Reports page (live/cmmsreports.js): the health score's inputs. */
.health-inputs { display: grid; gap: 6px; }
.health-inputs .bar { flex: 1; }

/* CMMS C8: the technician's phone screens (live/mobilework.js) on top of the Operator view's op-* classes. */
.op-sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #E6E9EF; background: rgba(255, 255, 255, .12); border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.op-sync .op-dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; }
.op-sync.off .op-dot { background: #D97706; }
.op-sync.busy .op-dot { background: #7C3AED; }
.op-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--p3-soft); color: var(--p3-ink); margin-bottom: 10px; }
.op-banner.bad { background: var(--p1-soft); color: var(--p1-ink); }
.op-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-muted); }
.op-chip.bad { background: var(--p1-soft); color: var(--p1-ink); }
.op-chip.warn { background: var(--p3-soft); color: var(--p3-ink); }
.op-field { display: flex; flex-direction: column; gap: 4px; }
.op-field label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.op-field .input, .op-field .select, .op-field .textarea { min-height: 44px; font-size: 16px; }
.op-task { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.op-task input[type="checkbox"] { width: 24px; height: 24px; flex: none; }
.op-task .input { min-height: 40px; width: 110px; font-size: 16px; }
.op-sheet { max-height: 85vh; overflow-y: auto; }
.op-sheet .op-field + .op-field { margin-top: 8px; }
.op-btn.wide { width: 100%; justify-content: center; }
.op-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* CMMS C10: parts and inventory (live/cmmsparts.js). */
.hint.bad { color: var(--p1-ink); }
.chip.chip-accent { background: var(--accent-soft); color: var(--accent-ink); }

/* CMMS C12: possible causes from the twin and benchmarks (live/cmmstwin.js). */
.rc-cand { padding: 8px 0; border-top: 1px solid var(--border); }
.rc-cand:first-child { border-top: 0; padding-top: 0; }
.rc-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-how summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.rc-formula { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-radius: 6px; padding: 6px 8px; margin: 0; }
.bm-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); display: grid; gap: 8px; }
.bm-card.compact { padding: 8px 10px; }
.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
@media (max-width: 720px) { .bm-grid { grid-template-columns: 1fr; } }

/* ROI calculator (staff pre-sales value scenarios, live/roi.js); shares the Estimator's layout classes. */
.roi-tier-verified { background: rgba(22, 163, 74, .12); color: #15803D; }
.roi-tier-observed { background: var(--accent-soft); color: var(--accent-ink); }
.roi-tier-scenario { background: var(--p3-soft); color: var(--p3-ink, var(--p3)); }
.roi-tier-estimate { background: var(--p1-soft); color: var(--p1-ink, var(--p1)); }
.roi-grade-A { background: rgba(22, 163, 74, .12); color: #15803D; }
.roi-grade-B { background: var(--accent-soft); color: var(--accent-ink); }
.roi-grade-C { background: var(--p3-soft); color: var(--p3-ink, var(--p3)); }
.roi-grade-D { background: var(--p1-soft); color: var(--p1-ink, var(--p1)); }
.roi-comps { display: grid; gap: 6px; }
.roi-comp { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.roi-comp .num { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 90px; text-align: right; }
.roi-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.roi-inputs td:first-child { min-width: 220px; }
.roi-missing td:first-child { box-shadow: inset 3px 0 0 var(--p3); }
.roi-grade { height: 28px; min-height: 0; padding: 2px 6px; font-size: 12px; }
.roi-date { width: 96px; text-align: left; }
.roi-collapsed .panel-body { display: none; }
.roi-total { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface-2); }
.roi-tot { width: 100%; font-size: 12.5px; }
.roi-tot td, .roi-tot th { padding: 4px 6px; }
.roi-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 6px; }
.roi-seglist { display: grid; gap: 2px; }
.roi-seglist .menu-item { text-align: left; white-space: normal; }
/* A framed tool's instructions use the page's full width (user, 2026-10-15), not the 70ch reading measure. */
.page-head:has(+ .live-tool-frame) .title { flex: 1 1 100%; }
.page-head:has(+ .live-tool-frame) p { max-width: none; }
/* Agents and AI models (live/agents.js, live/aimodels.js; ops-agents §6-§9). */
.ag-code { display: flex; gap: 8px; align-items: flex-start; }
.ag-code pre { flex: 1 1 auto; min-width: 0; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.ag-err { color: var(--p1-ink); }
.ag-contact { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px 4px; min-width: 0; }
.ag-contact legend { font-weight: 600; padding: 0 4px; }
.chip.sev-critical { background: var(--p1-soft); color: var(--p1-ink); }
.chip.sev-warning { background: var(--p3-soft); color: var(--p3-ink); }
.plain-list { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.staff-notice-group { display: grid; gap: 4px; margin: 10px 0; }
.staff-notice-row { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); }
.staff-notice-switches { gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.staff-notice-switches .field { max-width: 240px; }
/* Settings ▸ PeakLogic staff (live/staff.js; docs/design/staff-accounts.md). At phone width each row is a card. */
.staff-table td > .hint { display: block; margin-top: 2px; }
.staff-table td > .chip + .hint { margin-top: 4px; }
.staff-table td > .chip { justify-self: start; }
.staff-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.staff-link { display: flex; gap: 8px; flex-wrap: nowrap; margin: 8px 0; }
.staff-link input { flex: 1 1 auto; min-width: 0; }
.staff-foot { padding: 10px 14px; margin: 0; border-top: 1px solid var(--border); }
@media (max-width: 720px) {
  .staff-table thead { display: none; }
  .staff-table, .staff-table tbody, .staff-table tr { display: block; width: 100%; }
  .staff-table tr { border-top: 1px solid var(--border); padding: 10px 14px; }
  .staff-table tr:first-child { border-top: 0; }
  .staff-table td { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 2px 10px; padding: 4px 0; border: 0; }
  .staff-table td::before { content: attr(data-label); grid-row: 1 / span 3; font-size: 12px; font-weight: 600; color: var(--text-muted); padding-top: 2px; }
  .staff-table td > * { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
  .staff-table td.staff-who, .staff-table td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .staff-table td.staff-who::before, .staff-table td[data-label=""]::before { content: none; }
  .staff-table td.staff-who > *, .staff-table td[data-label=""] > * { grid-column: 1; }
  .staff-actions { justify-content: flex-start; padding-top: 4px; }
  .staff-link { flex-wrap: wrap; }
}

/* Change password form (Profile and settings ▸ Sign-in and security, 2026-10-15) */
.pw-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pw-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }

/* Add asset form and commissioning (live/assetwizard.js, docs/design/asset-onboarding.md §2.4, 2026-10-15) */
.chip.chip-warn { background: var(--p2-soft); color: var(--p2-ink); }
.asset-stage { font-size: 11px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }