/**
 * Operations overlays / drawers modernization — Phase 5A.3
 * Scoped ONLY under #…Drawer.operations-overlay-modern roots.
 * Does not restyle Ops Center main or Operation Detail modal content.
 * No !important. Stacking stays in styles.css (.operations-overlay-over-detail).
 */

/* —— Shared tokens (per-root) —— */
#operationsHandoffDrawer.operations-overlay-modern,
#operationsWorkOrderCreateDrawer.operations-overlay-modern,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern,
#operationsSupportDrawer.operations-overlay-modern,
#operationsRevisionDiffDrawer.operations-overlay-modern {
  --oo-ink: var(--ds-color-ink, var(--ink, #24262d));
  --oo-muted: var(--ds-color-muted, var(--muted, #6b7280));
  --oo-line: var(--ds-color-line, var(--line, #e5e7eb));
  --oo-surface: #fff;
  --oo-quiet: #f7f8f9;
  --oo-accent: var(--accent, #0f766e);
  --oo-danger: var(--red, #b42318);
  --oo-success: var(--success, #15803d);
  --oo-radius: 12px;
  --oo-touch: 44px;
  --oo-control: 40px;
  --oo-shadow:
    0 0 0 1px color-mix(in srgb, var(--oo-ink) 8%, transparent),
    0 16px 36px rgba(15, 23, 42, 0.14);
}

/* —— Centered shell (handoff + WO) —— */
#operationsHandoffDrawer.operations-overlay-modern,
#operationsWorkOrderCreateDrawer.operations-overlay-modern,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern {
  padding: 20px 16px;
  align-items: center;
  justify-content: center;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__backdrop,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__backdrop,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__backdrop {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__panel,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__panel,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__panel {
  width: min(760px, 100%);
  max-height: min(90dvh, 920px);
  border-radius: var(--oo-radius);
  box-shadow: var(--oo-shadow);
  background: var(--oo-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-drawer__panel,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-wo-drawer__panel {
  width: min(720px, 100%);
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__header,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__header,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--oo-line);
  background: var(--oo-surface);
  min-width: 0;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__header > div,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__header > div,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__header > div {
  min-width: 0;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__header .eyebrow,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__header .eyebrow,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__header .eyebrow {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oo-muted);
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__header h2,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__header h2,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__header h2 {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--oo-ink);
  overflow-wrap: anywhere;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__lead,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__lead,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__lead {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--oo-muted);
  max-width: 40rem;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__close,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__close,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__close {
  flex-shrink: 0;
  width: var(--oo-touch);
  height: var(--oo-touch);
  min-width: var(--oo-touch);
  min-height: var(--oo-touch);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--oo-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__close:hover,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__close:hover,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__close:hover {
  background: color-mix(in srgb, var(--oo-ink) 6%, transparent);
  color: var(--oo-ink);
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 10px;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__footer,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__footer,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--oo-line);
  background: var(--oo-surface);
}

/* WO create/update: form is flex column with scroll body */
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-form,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
}

#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-overlay-scroll,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-overlay-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--oo-success) 12%, transparent);
  color: var(--oo-success);
  font-size: 0.75rem;
  font-weight: 600;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-error,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-error,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-error,
#operationsSupportDrawer.operations-overlay-modern .operations-handoff-error,
#operationsRevisionDiffDrawer.operations-overlay-modern .operations-handoff-error {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--oo-danger) 28%, transparent);
  background: color-mix(in srgb, var(--oo-danger) 8%, transparent);
  color: var(--oo-danger);
  font-size: 0.8125rem;
  line-height: 1.35;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-missing {
  margin: 0 0 12px;
  padding: 8px 10px 8px 1.15rem;
  list-style: disc;
  border-radius: 8px;
  background: color-mix(in srgb, var(--oo-danger) 6%, transparent);
  color: var(--oo-danger);
  font-size: 0.8125rem;
  line-height: 1.35;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-section,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-section,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-section {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-section__title,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-section__title,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-section__title {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--oo-line);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--oo-ink);
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-section__grid,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-section__grid,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-field,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-field,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-field,
#operationsSupportDrawer.operations-overlay-modern .operations-handoff-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-field--wide,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-field--wide,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-field--wide,
#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-field:has(textarea),
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-field:has(textarea),
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-field:has(textarea) {
  grid-column: 1 / -1;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-field__label,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-field__label,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-field__label,
#operationsSupportDrawer.operations-overlay-modern .operations-handoff-field__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--oo-muted);
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-input,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-input,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-input,
#operationsSupportDrawer.operations-overlay-modern .operations-handoff-input {
  width: 100%;
  min-height: var(--oo-control);
  padding: 8px 10px;
  border: 1px solid var(--oo-line);
  border-radius: 8px;
  background: var(--oo-surface);
  color: var(--oo-ink);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.35;
  resize: vertical;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-input:focus,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-input:focus,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-input:focus,
#operationsSupportDrawer.operations-overlay-modern .operations-handoff-input:focus {
  outline: 2px solid color-mix(in srgb, var(--oo-accent) 35%, transparent);
  outline-offset: 0;
  border-color: color-mix(in srgb, var(--oo-accent) 55%, var(--oo-line));
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-actions,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-actions,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

#operationsHandoffDrawer.operations-overlay-modern .operations-handoff-actions .btn,
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-actions .btn,
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-actions .btn {
  min-height: var(--oo-touch);
  padding-inline: 14px;
  border-radius: 8px;
  font-size: 0.875rem;
}

/* —— WO offer items —— */
#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-items-list {
  display: grid;
  gap: 8px;
}

#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-item-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--oo-line);
  border-radius: 8px;
  background: var(--oo-quiet);
  min-width: 0;
}

#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-item-row > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--oo-accent);
}

#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-item-row__body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-item-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-item-row__main strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--oo-ink);
  overflow-wrap: anywhere;
}

#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-item-row__main small {
  font-size: 0.75rem;
  color: var(--oo-muted);
}

#operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-item-row input[type="text"] {
  grid-column: auto;
  width: 100%;
  min-height: var(--oo-control);
}

/* —— Milestones —— */
#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-wo-milestones {
  display: grid;
  gap: 6px;
}

#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-wo-milestone {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--oo-line);
  border-radius: 8px;
  background: var(--oo-surface);
}

#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-wo-milestone::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--oo-muted) 55%, transparent);
}

#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-wo-milestone.is-done::before {
  background: var(--oo-success);
}

#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-wo-milestone strong {
  font-size: 0.8125rem;
  color: var(--oo-ink);
}

#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-wo-milestone p {
  grid-column: 2;
  margin: 2px 0 0;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
  min-width: 0;
}

#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-workorders-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

#operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-workorders-list li {
  padding: 8px 10px;
  border: 1px solid var(--oo-line);
  border-radius: 8px;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

/* —— Support (right drawer) —— */
#operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__backdrop {
  background: rgba(15, 23, 42, 0.4);
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__panel {
  width: min(480px, 100vw);
  height: 100%;
  max-height: 100dvh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--oo-surface);
  box-shadow: var(--oo-shadow);
  border-left: 1px solid var(--oo-line);
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--oo-line);
  background: var(--oo-surface);
  min-width: 0;
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__header h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--oo-ink);
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__lead {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--oo-muted);
  line-height: 1.4;
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__close {
  flex-shrink: 0;
  width: var(--oo-touch);
  height: var(--oo-touch);
  min-width: var(--oo-touch);
  min-height: var(--oo-touch);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--oo-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-form {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-escalation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 0;
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-check {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: var(--oo-touch);
  padding: 4px 2px;
  font-size: 0.875rem;
  color: var(--oo-ink);
  cursor: pointer;
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  margin: 0;
  accent-color: var(--oo-accent);
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--oo-line);
  background: var(--oo-surface);
}

#operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__footer .btn {
  min-height: var(--oo-touch);
  padding-inline: 14px;
  border-radius: 8px;
  font-size: 0.875rem;
}

/* —— Revision diff (right drawer) —— */
#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-drawer__backdrop {
  background: rgba(15, 23, 42, 0.4);
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-drawer__panel {
  width: min(440px, 100vw);
  height: 100%;
  max-height: 100dvh;
  background: var(--oo-surface);
  box-shadow: var(--oo-shadow);
  border-left: 1px solid var(--oo-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-drawer__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--oo-line);
  background: var(--oo-surface);
  min-width: 0;
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-drawer__header .eyebrow {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oo-muted);
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-drawer__header h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--oo-ink);
  overflow-wrap: anywhere;
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-drawer__close {
  flex-shrink: 0;
  width: var(--oo-touch);
  height: var(--oo-touch);
  min-width: var(--oo-touch);
  min-height: var(--oo-touch);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--oo-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 16px 18px;
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-summary {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--oo-quiet);
  font-size: 0.8125rem;
  color: var(--oo-muted);
  line-height: 1.4;
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-list__item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--oo-line);
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--oo-ink);
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-list__item::before {
  font-weight: 700;
  text-align: center;
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-list__item--added {
  border-color: color-mix(in srgb, var(--oo-success) 35%, var(--oo-line));
  background: color-mix(in srgb, var(--oo-success) 6%, transparent);
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-list__item--added::before {
  content: "+";
  color: var(--oo-success);
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-list__item--removed {
  border-color: color-mix(in srgb, var(--oo-danger) 35%, var(--oo-line));
  background: color-mix(in srgb, var(--oo-danger) 6%, transparent);
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-list__item--removed::before {
  content: "−";
  color: var(--oo-danger);
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-list__item--changed {
  border-color: color-mix(in srgb, var(--oo-accent) 30%, var(--oo-line));
  background: color-mix(in srgb, var(--oo-accent) 5%, transparent);
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-list__item--changed::before {
  content: "Δ";
  color: var(--oo-accent);
}

#operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-note {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--oo-muted);
}

/* —— Mobile ≤767 —— */
@media screen and (max-width: 767px) {
  /* Main-context handoff must clear mobile bottom nav (z=2000) but stay below detail (2100). */
  #operationsHandoffDrawer.operations-overlay-modern:not(.operations-overlay-over-detail) {
    z-index: 2050;
  }

  #operationsHandoffDrawer.operations-overlay-modern,
  #operationsWorkOrderCreateDrawer.operations-overlay-modern,
  #operationsWorkOrderUpdateDrawer.operations-overlay-modern {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  #operationsHandoffDrawer.operations-overlay-modern .operations-handoff-drawer__panel,
  #operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-drawer__panel,
  #operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-drawer__panel,
  #operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-wo-drawer__panel,
  #operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-wo-drawer__panel {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #operationsHandoffDrawer.operations-overlay-modern .operations-handoff-section__grid,
  #operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-section__grid,
  #operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-section__grid {
    grid-template-columns: 1fr;
  }

  #operationsHandoffDrawer.operations-overlay-modern .operations-handoff-actions,
  #operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-actions,
  #operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-actions,
  #operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__footer {
    flex-direction: column;
  }

  #operationsHandoffDrawer.operations-overlay-modern .operations-handoff-actions .btn,
  #operationsWorkOrderCreateDrawer.operations-overlay-modern .operations-handoff-actions .btn,
  #operationsWorkOrderUpdateDrawer.operations-overlay-modern .operations-handoff-actions .btn,
  #operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__footer .btn {
    width: 100%;
  }

  #operationsSupportDrawer.operations-overlay-modern .operations-support-drawer__panel,
  #operationsRevisionDiffDrawer.operations-overlay-modern .operations-revision-diff-drawer__panel {
    width: 100vw;
    max-width: 100vw;
  }
}