/* Contact is the approved record-card reference. */
:is(.company-page, .contact-card, .company-contacts-dialog) {
  --record-canvas: var(--bg, #f4f7fb);
  --record-shadow: 0 10px 30px rgba(27, 42, 71, .08);
  --record-chip-ink: var(--blue);
  --radius: 16px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--text);
}
html:not([data-theme="dark"]) :is(.company-page, .contact-card, .company-contacts-dialog) {
  --record-canvas: linear-gradient(180deg, #f7f9fd 0%, #f2f6fb 100%);
  --record-chip-ink: #23459a;
  --text: #19263d;
  --muted: #68768f;
  --line: #e5ebf5;
  --blue: #2962ff;
  --blue-hover: #2450d8;
  --blue-soft: #e9f0ff;
  --surface: #ffffff;
  --surface-soft: #f5f8ff;
  --input-bg: #ffffff;
}
html[data-theme="dark"] :is(.company-page, .contact-card, .company-contacts-dialog) {
  --record-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
:is(.company-page, .contact-card) {
  min-width: 0;
  padding: 18px 24px 28px;
  border-radius: 16px;
  background: var(--record-canvas);
}
:is(.company-page, .contact-card) :is(.company-modal-card, .card) {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--record-shadow);
  color: var(--text);
}
:is(.company-page, .contact-card) :is(h1, h2, h3, strong) { color: var(--text); }
:is(.company-page, .contact-card) :is(.company-modal-head h3, .company-modal-card > h3, .card-head h2, .cc-actions > h2, .cc-history-head h2) {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -.2px;
}
:is(.company-page, .contact-card, .company-contacts-dialog) .text-btn {
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
}
:is(.company-page, .contact-card, .company-contacts-dialog) .button:not(.text-btn) {
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  white-space: normal;
}
:is(.company-page, .contact-card) .button.secondary {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}
:is(.company-page, .contact-card) .button:not(.secondary):not(.danger):not(.text-btn) {
  background: #2962ff;
  border-color: #2962ff;
  color: #fff;
}
:is(.company-page, .contact-card) .button:not(.secondary):not(.danger):not(.text-btn):hover { background: #2450d8; }
/* Keep contact links as links despite legacy dark-mode primary-button rules. */
:is(#main, #contact-card-dialog) :is(.company-page, .contact-card) .button.text-btn {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  box-shadow: none;
}
:is(.company-page, .contact-card, .company-contacts-dialog) :is(.filter-input, .filter-select, .field input, .field select, .field textarea, .company-note-editor) {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
:is(.company-page, .contact-card, .company-contacts-dialog) :is(input, textarea)::placeholder { color: var(--muted); }
:is(.company-page, .contact-card) :is(.field, .cc-email-address) { color: var(--muted); font-size: 13px; }
:is(.company-page, .contact-card) :is(.button.secondary:hover, .icon-btn:hover) { background: var(--surface-soft); }

/* Underlined tabs, shared by the company and contact interiors. */
:is(.company-page .company-tabs, .contact-card .cc-tabs) {
  display: flex;
  align-items: stretch;
  gap: 8px 18px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 0 16px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:is(.company-page .company-tabs, .contact-card .cc-tabs) .tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 2px 12px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
:is(.company-page .company-tabs, .contact-card .cc-tabs) .tab.active { color: var(--text); font-weight: 700; }
:is(.company-page .company-tabs, .contact-card .cc-tabs) .tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 99px;
  background: var(--blue);
}
:is(.company-page .company-tabs, .contact-card .cc-tabs) .tab:hover:not(:disabled) { color: var(--blue); background: transparent; }
:is(.company-page .company-tabs, .contact-card .cc-tabs) .tab:disabled { opacity: .48; }
:is(.company-page .company-tabs, .contact-card .cc-tabs) :is(b, small) { font-size: 12px; color: inherit; }

/* Company information, people, composition, planned actions and history. */
.company-page .company-page-heading { margin: 0 0 10px; align-items: center; }
.company-page .company-page-heading h1 { margin: 8px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.company-page .company-summary {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.2fr;
  gap: 0;
  padding: 0;
  margin: 14px 0 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.company-page .company-summary > div { padding: 16px 20px; gap: 4px; border-right: 1px solid var(--line); }
.company-page .company-summary > div:last-child { border-right: 0; }
.company-page .company-summary span { font-size: 13px; }
.company-page .company-summary strong { font-size: 14px; font-weight: 700; }
:is(.company-page .company-modal-layout, .contact-card .cc-layout) { grid-template-columns: minmax(0, 1.03fr) minmax(0, 1.17fr); gap: 18px; }
:is(.company-page .company-modal-column, .contact-card .cc-left, .contact-card .cc-right) { gap: 14px; }
.company-page .company-modal-card { padding: 18px 20px; }
.company-page .company-modal-head { gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.company-page .company-identity { gap: 16px; margin-bottom: 16px; }
.company-page .company-identity strong { font-size: 18px; font-weight: 800; }
:is(.company-page .company-logo, .contact-card .cc-avatar) {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 24px;
  font-weight: 800;
}
.company-page .company-meta { gap: 10px; }
.company-page .company-meta div { padding: 10px 12px; border-color: var(--line); background: var(--surface-soft); }
.company-page .company-meta span { font-size: 12px; }
.company-page .company-meta strong { font-size: 14px; font-weight: 600; }
:is(.company-page, .company-contacts-dialog) .company-contact-row { gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
:is(.company-page, .company-contacts-dialog) .company-contact-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-weight: 800; }
:is(.company-page, .company-contacts-dialog) .company-contact-main { gap: 3px; }
:is(.company-page, .company-contacts-dialog) .company-contact-main strong { font-size: 16px; font-weight: 700; }
:is(.company-page, .company-contacts-dialog) .company-contact-main small { font-size: 14px; line-height: 1.5; }
:is(.company-page, .company-contacts-dialog) .company-contact-actions { gap: 8px; }
:is(.company-page, .company-contacts-dialog) .company-contact-actions .icon-btn { width: 40px; min-width: 40px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.company-page .company-products > span { padding: 8px 12px; border-radius: 999px; background: var(--surface-soft); border-color: var(--line); color: var(--record-chip-ink); font-size: 14px; font-weight: 600; }
.company-page :is(.company-description, .company-modal-card > .muted) { font-size: 16px; line-height: 1.7; }
.company-page .company-compose { padding: 16px; }
.company-page .company-note-switch { gap: 8px; padding: 0; margin-bottom: 12px; border: 0; background: transparent; }
.company-page .company-note-switch .segment { flex: 1; min-height: 42px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 700; box-shadow: none; }
.company-page .company-note-switch .segment.active { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 18%, var(--line)); color: var(--blue); }
.company-page .company-note-editor { min-height: 112px; border-radius: 14px; }
.company-page .company-compose .form-actions { margin-top: 10px; padding-top: 0; border: 0; }
.company-page :is(.company-plan-card, .company-history-card) { padding: 0; overflow: hidden; }
.company-page :is(.company-plan-card, .company-history-card) > .company-modal-head { padding: 16px 18px; margin: 0; border-bottom: 1px solid var(--line); }
.company-page :is(.company-plan-card, .company-history-card) > .muted { padding: 18px; }
:is(.company-page .company-count, .contact-card .cc-history-head > span) { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 13px; font-weight: 600; }
.company-page .company-planned-task { gap: 14px; padding: 14px 18px; }
.company-page .company-planned-task:first-of-type { border-top: 0; }
.company-page .company-planned-task strong { font-size: 16px; font-weight: 700; }
.company-page .company-planned-task small { font-size: 13px; }
.company-page .company-planned-task time { font-size: 13px; font-weight: 600; }
.company-page .company-history { padding: 0 18px 12px; }
.company-page .company-history-item { gap: 12px; padding: 14px 0; }
.company-page .company-history-item:first-child { border-top: 0; }
.company-page .company-history-item strong { font-size: 16px; font-weight: 700; }
.company-page .company-history-item p { font-size: 15px; }
.company-page .company-history-item time { font-size: 12px; }
.company-page .company-record { padding: 14px 0; color: var(--text); border-color: var(--line); }
.company-page .company-record strong { font-size: 14px; font-weight: 700; }
.company-page .company-record small { font-size: 13px; color: var(--muted); }
.company-page .company-details div { border-color: var(--line); background: var(--surface-soft); }
.company-page .company-details dt { font-size: 13px; color: var(--muted); }
.company-page .company-details dd { font-size: 14px; color: var(--text); }

/* Contact interior uses the same surfaces and hierarchy. */
.contact-card .cc-back-row { margin-bottom: 16px; }
.contact-card .cc-header { grid-template-columns: 74px minmax(0, 1fr) 230px; padding: 20px; gap: 16px; }
.contact-card .cc-identity h2 { margin-bottom: 6px; font-size: 28px; line-height: 1.25; font-weight: 800; }
.contact-card .cc-identity > p { font-size: 14px; }
.contact-card .cc-header-companies > small { font-size: 13px; }
.contact-card .cc-inline-actions { gap: 8px; }
.contact-card .card-head { align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px 10px; }
.contact-card .cc-panel-content { padding: 0 20px 18px; }
.contact-card .cc-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-card .cc-details dt { margin-bottom: 4px; font-size: 13px; }
.contact-card .cc-details dd { font-size: 14px; line-height: 1.6; }
.contact-card .cc-relation { gap: 12px; padding: 14px 0; }
.contact-card .cc-relation small { margin-top: 4px; font-size: 13px; line-height: 1.5; }
.contact-card .cc-actions { padding: 16px; }
.contact-card .cc-actions .cc-inline-actions { margin-top: 12px; }
.contact-card .cc-history { padding: 0 18px 16px; }
.contact-card .cc-history-head { gap: 12px; margin: 0 -18px 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.contact-card .cc-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.contact-card .cc-filters .field { font-size: 12px; }
.contact-card .cc-filters select { min-height: 42px; padding: 8px 10px; font-size: 13px; }
.contact-card .cc-entry { gap: 12px; padding: 14px 0; }
:is(.contact-card .cc-entry > .entity-icon, .company-page .company-history-item > .entity-icon) { width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); }
.contact-card .cc-entry-body { border-color: var(--line); border-radius: 14px; padding: 14px; background: var(--surface); }
.contact-card .cc-entry-body > :is(.text-btn, strong) { font-size: 15px; font-weight: 700; }
.contact-card .cc-entry-body > p { margin-top: 5px; font-size: 14px; line-height: 1.6; color: var(--text); }
.contact-card .cc-entry-meta { font-size: 12px; }
.contact-card .cc-entry-links { gap: 6px 12px; }
.contact-card .cc-entry-links :is(.text-btn, small) { font-size: 12px; }
.contact-card .cc-history > .cc-entry { border-bottom: 1px solid var(--line); }
.contact-card .cc-history > .cc-entry:last-child { border-bottom: 0; }
.contact-card .cc-history .cc-entry-body { padding: 0; border: 0; background: transparent; }
.contact-card .cc-empty { font-size: 14px; line-height: 1.7; }
.contact-card .cc-mail-folders { gap: 8px; }
.contact-card .cc-mail-folders .segment { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 13px; }
.contact-card .cc-mail-folders .segment.active { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 18%, var(--line)); color: var(--blue); font-weight: 700; }
.contact-card .cc-editor { border-color: var(--blue); }

/* Only the contact list opened from the company card uses this dialog styling. */
.company-contacts-dialog.modal { width: min(920px, calc(100vw - 48px)); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.company-contacts-dialog .modal-head { padding: 20px 22px 14px; background: var(--surface); }
.company-contacts-dialog .modal-head h2 { font-size: 18px; font-weight: 800; }
.company-contacts-dialog .modal-body { padding: 18px 22px 22px; background: var(--surface); }
.company-contacts-dialog .company-contact-group header { color: var(--text); border-color: var(--line); padding: 18px 0 8px; }
.company-contacts-dialog .company-contact-group header h4 { font-size: 15px; font-weight: 800; }
.company-contacts-dialog .company-contact-group header span { padding: 3px 8px; border-radius: 999px; background: var(--surface-soft); font-size: 12px; }
.company-contacts-dialog .company-contacts-result { font-size: 13px; }

@media (max-width: 1100px) {
  .company-page .company-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-page .company-summary > div { border-bottom: 1px solid var(--line); }
  .company-page .company-summary > div:nth-child(2n) { border-right: 0; }
  .company-page .company-summary > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .contact-card .cc-header { grid-template-columns: 74px minmax(0, 1fr); }
  .contact-card .cc-header-companies { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  :is(.company-page .company-modal-layout, .contact-card .cc-layout) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :is(.company-page, .contact-card) { padding: 14px 12px 20px; }
  :is(.company-page .company-page-heading h1, .contact-card .cc-identity h2) { font-size: 23px; }
  .company-page .company-page-heading { align-items: flex-start; }
  .company-page .company-summary { grid-template-columns: minmax(0, 1fr); }
  .company-page .company-summary > div { padding: 12px 16px; border-right: 0; }
  .company-page .company-summary > div:not(:last-child) { border-bottom: 1px solid var(--line); }
  :is(.company-page .company-tabs, .contact-card .cc-tabs) { flex-wrap: nowrap; gap: 14px; overflow-x: auto; padding-bottom: 2px; }
  :is(.company-page .company-tabs, .contact-card .cc-tabs) .tab { font-size: 13px; }
  .company-page .company-modal-card { padding: 16px; }
  .company-page :is(.company-plan-card, .company-history-card) { padding: 0; }
  .company-page .company-note-switch { flex-wrap: wrap; }
  .company-page .company-note-switch .segment { flex: 1 1 160px; }
  :is(.company-page, .company-contacts-dialog) .company-contact-row { flex-wrap: wrap; gap: 10px; }
  :is(.company-page, .company-contacts-dialog) .company-contact-main { flex: 1 1 120px; }
  :is(.company-page, .company-contacts-dialog) .company-contact-actions { flex-direction: row; margin-left: auto; }
  .company-page .company-planned-task { flex-wrap: wrap; }
  .company-page .company-planned-task time { margin-left: 48px; text-align: left; }
  .contact-card .cc-header { padding: 16px; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
  .contact-card .cc-avatar { width: 54px; height: 54px; border-radius: 14px; font-size: 20px; }
  .contact-card .card-head { padding: 16px 16px 10px; }
  .contact-card .cc-panel-content { padding: 0 16px 16px; }
  .contact-card .cc-details { grid-template-columns: minmax(0, 1fr); }
  .contact-card .cc-filters { grid-template-columns: minmax(0, 1fr); }
  .contact-card .cc-entry-meta { gap: 4px; }
  :is(.company-page, .contact-card, .company-contacts-dialog) :is(input, select, textarea) { font-size: 16px; }
  .company-contacts-dialog.modal { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
  .company-contacts-dialog :is(.modal-head, .modal-body) { padding: 16px; }
}

/* Task views need their status colors after the shared record-card theme layer. */
html[data-theme="dark"] .task-board-col {
  background: linear-gradient(180deg, color-mix(in srgb, var(--task-status-accent) 16%, var(--surface)), var(--surface)) !important;
  border-color: color-mix(in srgb, var(--task-status-accent) 36%, var(--line)) !important;
  border-top-color: var(--task-status-accent) !important;
}
html[data-theme="dark"] .task-board-col header span {
  background: color-mix(in srgb, var(--task-status-accent) 22%, var(--surface-elevated)) !important;
  color: color-mix(in srgb, var(--task-status-accent) 56%, var(--text)) !important;
}
html[data-theme="dark"] .task-stages .kanplan-stage {
  background: color-mix(in srgb, var(--task-status-accent) 18%, var(--surface)) !important;
  color: color-mix(in srgb, var(--task-status-accent) 46%, var(--text)) !important;
  border-color: color-mix(in srgb, var(--task-status-accent) 35%, var(--line)) !important;
  border-top-color: var(--task-status-accent) !important;
}

/* Contact is the reference above. Adapters below target record interiors only;
   list rows, navigation, settings, confirmations and conversation editors keep
   their own density and layout. Theme colors continue to come from the shell. */
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-workspace > .project-tabs, .project-workspace > .project-workspace-nav,
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) {
  --record-canvas: var(--bg, #f4f7fb);
  --record-shadow: 0 10px 30px rgba(27, 42, 71, .08);
  --record-action-bg: var(--action-bg, var(--blue));
  --record-action-hover: var(--action-hover, var(--blue-hover));
  --radius: 16px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}
html:not([data-theme="dark"]) :is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-workspace > .project-tabs, .project-workspace > .project-workspace-nav,
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) {
  --record-canvas: linear-gradient(180deg, #f7f9fd 0%, #f2f6fb 100%);
  --record-action-bg: #2962ff;
  --record-action-hover: #2450d8;
  --text: #19263d;
  --muted: #68768f;
  --line: #e5ebf5;
  --blue: #2962ff;
  --blue-hover: #2450d8;
  --blue-soft: #e9f0ff;
  --surface: #fff;
  --surface-soft: #f5f8ff;
  --input-bg: #fff;
  --input-text: var(--text);
  --control-border: var(--line);
}
html[data-theme="dark"] :is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-workspace > .project-tabs, .project-workspace > .project-workspace-nav,
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) { --record-shadow: 0 10px 30px rgba(0, 0, 0, .22); }

:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)) {
  min-width: 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 12px;
  font-family: inherit;
  font-size: var(--record-field-font-size, 14px);
  line-height: 1.5;
}
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)):where(:not(table *, .task-link-grid *, .project-member-row *, .drive-member *)) {
  min-height: 42px;
  padding: 10px 14px;
}
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)):where(:not([readonly]):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.error *):not(.has-error *)) {
  border-color: var(--control-border, var(--line));
  background: var(--input-bg);
  color: var(--input-text, var(--text));
}
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)):where([readonly], :disabled) { background: var(--subtle, var(--surface-soft)); color: var(--muted); }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)):focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)):is([aria-invalid="true"], .is-invalid, .invalid) { border-color: var(--red, #c94b50); }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(input, textarea):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *))::placeholder { color: var(--muted); }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(.field, .drive-field):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)) { color: var(--muted); font-size: 13px; }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) .button:not(.text-btn):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)) {
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
}
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) .button.secondary:not(.danger):not(.green-button):not(.ep-write):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)) { color: var(--text); background: var(--surface); border-color: var(--control-border, var(--line)); }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) .button.secondary:not(.danger):not(.green-button):not(.ep-write):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)):hover:not(:disabled) { background: var(--surface-soft); border-color: var(--blue); }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) .button:not(.secondary):not(.danger):not(.green-button):not(.ep-write):not(.text-btn):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)) { background: var(--record-action-bg); border-color: var(--record-action-bg); color: #fff; }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) .button:not(.secondary):not(.danger):not(.green-button):not(.ep-write):not(.text-btn):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)):hover:not(:disabled) { background: var(--record-action-hover); border-color: var(--record-action-hover); }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) .button.text-btn:not(.danger):not(.green-button):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)) { min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--blue); box-shadow: none; font-size: 13px; font-weight: 600; }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(button, a, input, select, textarea):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Dialog chrome is scoped to card contents. Drawers keep their positioning,
   sticky headers, full-height layout and mobile close controls. */
:is(
  .ms-dialog.modal, dialog.ms-reference-popup.modal, .ep-dialog.modal.wide,
  .project-iteration-dialog.modal, .project-idea-dialog.modal,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content)
):not(.record-side-dialog) {
  border-color: var(--line);
  border-radius: 16px;
  background: var(--record-canvas);
  box-shadow: var(--record-shadow);
}
:is(
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content)
):not(.record-side-dialog) > .modal-head {
  padding: 20px 22px 14px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}
:is(.ms-dialog, dialog.ms-reference-popup, .ep-dialog, #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"]), > .modal-body > form[data-org-form="group"], > .modal-body > form:is([data-support-form="group"], [data-support-form="article"]), > .modal-body > form[data-billing-form], > .modal-body > .platform-form, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content)) > .modal-head h2 {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}
:is(.ms-dialog, dialog.ms-reference-popup, .ep-dialog, #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"]), > .modal-body > form[data-org-form="group"], > .modal-body > form:is([data-support-form="group"], [data-support-form="article"]), > .modal-body > form[data-billing-form], > .modal-body > .platform-form, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content)) > .modal-body { background: var(--record-canvas); }

/* Lead/deal and stock-document interiors share the reference panels. */
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"], .ms-dialog) :is(.record-side-head, .record-tabs, .record-meta-grid, .ms-form-footer) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"], .ms-dialog) :is(.record-side-body, .ms-card-sections, .ms-catalog-sections) { background: var(--record-canvas); }
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"]) .record-side-body { gap: 18px; padding: 18px; }
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"]) .record-column {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--record-shadow);
}
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"]) .record-column > h3 { color: var(--text); font-size: 16px; font-weight: 800; line-height: 1.4; }
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"]) .form-actions.record-edit-actions { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 87%, transparent), var(--surface) 35%); }
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"], .ms-dialog) :is(.record-column, .record-section, .record-client-card, .ms-form-section) { border-color: var(--line); color: var(--text); }
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"], .ms-dialog) :is(.record-client-card, .ms-form-section) {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--record-shadow);
}
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"], .ms-dialog) :is(.record-title-block h2, .record-section h3, .ms-form-section h3) { color: var(--text); font-weight: 800; }
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"], .ms-dialog) :is(.record-section h3, .ms-form-section h3) { font-size: 16px; line-height: 1.4; }
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"], .ms-dialog) :is(.record-title-block small, .record-meta-grid dt, .record-details dt, .ms-form-section .field > span, .ms-reference-details dt) { color: var(--muted); font-size: 13px; }
:is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"], .ms-dialog) :is(.record-details dd, .record-client-card strong, .ms-reference-details dd) { color: var(--text); font-size: 14px; }
dialog.ms-reference-popup.modal > .modal-body { padding: 18px 22px 22px; }

/* Underlines replace legacy pill tabs; overflow and sticky offsets stay local. */
:is(
  .record-side-panel[data-record-side="lead"] .record-tabs,
  .record-side-panel[data-record-side="deal"] .record-tabs,
  .ms-dialog .record-tabs, .ms-dialog .ms-catalog-tabs, .ep-dialog .ep-tabs,
  .project-workspace > .project-tabs, .project-iteration-dialog .project-iteration-tabs
) {
  gap: 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
:is(
  .record-side-panel[data-record-side="lead"] .record-tabs,
  .record-side-panel[data-record-side="deal"] .record-tabs,
  .ms-dialog .record-tabs, .ms-dialog .ms-catalog-tabs, .ep-dialog .ep-tabs,
  .project-workspace > .project-tabs, .project-iteration-dialog .project-iteration-tabs
) :is(.record-tab, button) {
  position: relative;
  min-height: 44px;
  padding: 10px 2px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
:is(
  .record-side-panel[data-record-side="lead"] .record-tabs,
  .record-side-panel[data-record-side="deal"] .record-tabs,
  .ms-dialog .record-tabs, .ms-dialog .ms-catalog-tabs, .ep-dialog .ep-tabs,
  .project-workspace > .project-tabs, .project-iteration-dialog .project-iteration-tabs
) :is(.active, .is-active) { background: transparent; color: var(--text); font-weight: 700; }
:is(
  .record-side-panel[data-record-side="lead"] .record-tabs,
  .record-side-panel[data-record-side="deal"] .record-tabs,
  .ms-dialog .record-tabs, .ms-dialog .ms-catalog-tabs, .ep-dialog .ep-tabs,
  .project-workspace > .project-tabs, .project-iteration-dialog .project-iteration-tabs
) :is(.active, .is-active)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 99px;
  background: var(--blue);
}
:is(.record-side-panel[data-record-side="lead"] .record-tabs, .record-side-panel[data-record-side="deal"] .record-tabs, .ms-dialog .record-tabs, .ms-dialog .ms-catalog-tabs, .ep-dialog .ep-tabs, .project-workspace > .project-tabs, .project-iteration-dialog .project-iteration-tabs) :is(.record-tab, button):hover:not(:disabled) { background: transparent; color: var(--blue); }

/* Tasks retain their sidebar, link-grid density, status and checklist colors. */
#app-dialog :is(.task-editor, .task-overview) { color: var(--text); font-size: 16px; }
#app-dialog :is(.task-content, .task-overview-content) { background: var(--surface); }
#app-dialog :is(.task-sidebar, .task-link-panel) { background: var(--surface-soft); border-color: var(--line); }
#app-dialog:has(.task-editor, .task-overview) .task-footer { background: var(--surface); border-color: var(--line); }
#app-dialog :is(.task-editor, .task-overview) .task-field > span { font-size: 13px; color: var(--muted); }
#app-dialog :is(.task-editor, .task-overview) .task-link-grid :is(input, select) { min-height: 34px; padding: 7px 9px; font-size: 12px; }

/* Employee profile literals are adapted without recoloring status badges. */
.ep-dialog.modal.wide { color: var(--text); }
.ep-dialog :is(.ep-hero, .ep-panel) { background: var(--record-canvas); }
.ep-dialog :is(.ep-info-card, .ep-mail-card, .ep-channel) { border-color: var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--record-shadow); }
.ep-dialog :is(.ep-name-line h3, .ep-panel-heading h3, .ep-info-card h4, .ep-channel h4) { color: var(--text); font-weight: 800; }
.ep-dialog .ep-name-line h3 { font-size: 28px; line-height: 1.25; }
.ep-dialog :is(.ep-panel-heading h3, .ep-info-card h4, .ep-channel h4) { font-size: 16px; }
.ep-dialog :is(.ep-position, .ep-info-card dd) { color: var(--text); font-size: 14px; }
.ep-dialog :is(.ep-department, .ep-panel-heading p, .ep-info-card dt, .ep-channel p, .ep-preview-note) { color: var(--muted); font-size: 13px; }
.ep-dialog .ep-info-card dl > div { border-color: var(--line); }
.ep-dialog .ep-preview-note { border-color: var(--line); background: var(--surface-soft); }
.ep-dialog .ep-avatar { border-color: var(--surface); background: var(--blue-soft); color: var(--blue); }
.ep-dialog .ep-edit { color: var(--blue); font-size: 13px; }

/* Project passports, editors, iterations and ideas keep their grids/scrolling. */
.project-workspace { border-color: var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--record-shadow); }
:is(.project-entity-dialog.modal.record-side-dialog, .project-entity-dialog > .modal-body, .project-entity-form, .project-passport-view, .project-passport-body, .project-idea-dialog .project-idea-columns > main) { background: var(--record-canvas); }
:is(.project-entity-form .project-form-section, .project-passport-view .project-form-section, .project-iteration-dialog .project-iteration-section:not(.project-iteration-comments), .project-idea-dialog .project-idea-columns > main section) { border-color: var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--record-shadow); }
:is(.project-entity-form .project-entity-head, .project-entity-form .project-entity-actions, .project-passport-view .project-passport-toolbar, .project-idea-dialog .project-idea-head) { border-color: var(--line); background: var(--surface); color: var(--text); }
.project-passport-view { border-color: var(--line); border-radius: 16px; }
:is(.project-entity-form, .project-passport-view) .project-form-section > header > span { background: var(--blue-soft); color: var(--blue); }
:is(.project-entity-form, .project-passport-view) :is(.project-form-section h3, .project-passport-toolbar h3) { color: var(--text); font-size: 16px; font-weight: 800; }
:is(.project-entity-form, .project-passport-view) :is(.project-form-section > header p, .project-view-facts dt, .field > span, .project-view-team small) { color: var(--muted); font-size: 13px; }
:is(.project-entity-form, .project-passport-view) :is(.project-view-facts dd, .project-view-description, .project-view-team strong) { color: var(--text); font-size: 14px; }
.project-passport-view .project-view-description { line-height: 1.7; }
.project-passport-view .project-view-links a { border-color: var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--text); }
.project-passport-view .project-view-links a:hover { border-color: var(--blue); }
.project-iteration-dialog .project-iteration-section:not(.project-iteration-comments) > header h3 { color: var(--text); font-size: 16px; font-weight: 800; }
.project-iteration-dialog .project-iteration-section:not(.project-iteration-comments) > header p { color: var(--muted); font-size: 13px; }
.project-idea-dialog :is(.project-idea-head, .project-idea-columns > main) :is(h3, h4, dd) { color: var(--text); }
.project-idea-dialog :is(.project-idea-head, .project-idea-columns > main) :is(header p, section p, dt) { color: var(--muted); }
.project-idea-dialog .project-idea-head dl > div { background: var(--surface-soft); border-radius: 12px; }
.project-idea-dialog .project-idea-title-line h3 { font-size: 16px !important; }
.project-idea-dialog .project-idea-head dt { font-size: 12px !important; }
.project-idea-dialog .project-idea-head dd { font-size: 14px !important; }

/* Directory record forms and document viewers; directory lists stay untouched. */
.platform-form .platform-upload { border-color: var(--line); border-radius: 16px; background: var(--surface); }
#app-dialog:has(> .modal-body > .doc-content) > .modal-body > .doc-content { border-color: var(--line); border-radius: 16px; padding: 18px 20px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.7; }
.drive-sharing { color: var(--text); }
.drive-sharing :is(.drive-public, .drive-share-heading) { border-color: var(--line); }
.drive-sharing .drive-public { border-radius: 16px; background: var(--surface-soft); }
:is(.drive-sharing, .drive-form:not([data-drive-form="delete"])) :is(h3, .drive-share-heading strong) { color: var(--text); font-size: 16px; font-weight: 800; }
:is(.drive-sharing, .drive-form:not([data-drive-form="delete"])) :is(.drive-form-hint, .drive-share-heading p) { color: var(--muted); font-size: 13px; }

/* Subscription detail and support record chrome, separate from their lists/chat. */
.billing-workspace { background: var(--record-canvas); font-size: 16px; }
.billing-workspace :is(.billing-work-header, .billing-client-panel) { background: var(--surface); }
.billing-workspace .billing-current-terms, .billing-detail :is(.billing-note, .billing-history > li) { border-color: var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--record-shadow); }
.billing-workspace :is(.billing-client-data dt, .billing-terms-grid dt, .billing-work-header small, .billing-muted), .billing-detail .billing-snapshot dt { font-size: 13px; }
.billing-workspace :is(.billing-client-data dd, .billing-terms-grid dd), .billing-detail .billing-snapshot dd { font-size: 14px; }
.billing-workspace .billing-section-heading h3 { font-size: 16px; font-weight: 800; }
.support-detail > aside, .support-detail > .support-conversation, .support-article { border-color: var(--line); border-radius: 16px; box-shadow: var(--record-shadow); }
.support-detail > .support-conversation { box-shadow: 0 10px 30px rgba(27, 42, 71, .08); }
html[data-theme="dark"] .support-detail > .support-conversation { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
.support-ticket-header { border-color: var(--line); background: var(--record-canvas); }
.support-detail > aside > h2 { font-size: 16px; font-weight: 800; }
.support-detail > aside > p, .support-ticket-header .support-meta dt { color: var(--muted); font-size: 13px; }
.support-ticket-header .support-meta dd { font-size: 14px; }
.support-article { background: var(--surface); }
.support-article h2 { font-size: 28px; font-weight: 800; line-height: 1.25; }
.support-article-body { font-size: 16px; line-height: 1.7; }

@media (max-width: 600px) {
  :is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"]) .record-side-body { padding: 12px; }
  :is(.record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"]) .record-column { padding: 16px; }
  .ep-dialog.modal.wide { border-radius: 0; }
  .ep-dialog .ep-name-line h3, .support-article h2 { font-size: 23px; }
  :is(.ms-dialog, dialog.ms-reference-popup, .ep-dialog) > .modal-head { padding: 16px; }
:is(
  .record-side-panel[data-record-side="lead"], .record-side-panel[data-record-side="deal"],
  .ms-dialog, dialog.ms-reference-popup, .ep-dialog,
  #app-dialog:has(> .modal-body > form:is([data-form="event"], [data-form="lead"], [data-form="deal"], [data-form="client"], [data-form="department"], [data-form="employee"], [data-org-form="group"], [data-support-form="group"], [data-support-form="article"], [data-billing-form], .platform-form, .project-form:not([data-project-form="channel"]))),
  #app-dialog:has(.task-editor, .task-overview, .billing-workspace, > .modal-body > [data-drive-modal]:not([data-drive-form="delete"]), > .modal-body > .doc-content),
  .project-passport-view, .project-entity-dialog, .project-form:not([data-project-form="channel"]),
  .project-iteration-workspace > :not(.project-iteration-comments), .project-idea-head, .project-idea-columns > main,
  .platform-form, .billing-form, .billing-detail,
  .support-detail-toolbar, .support-ticket-header, .support-detail > aside, .support-article,
  .drive-form:not([data-drive-form="delete"]), .drive-sharing
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):where(:not(.project-idea-chat *, .project-chat-layout *, .project-iteration-comments *, .support-messages *, .support-composer *)):where(:not(table *, .task-link-grid *, .project-member-row *, .drive-member *)) { font-size: 16px; }
}
@media (pointer: coarse) {
  :is(.company-page.company-page, .company-contacts-dialog.company-contacts-dialog) :is(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"])) { font-size: 16px; }
  :is(.company-page, .company-contacts-dialog) :is(.button:not(.text-btn), .tab, .company-contact-actions .icon-btn) { min-width: 44px; min-height: 44px; }
}

/* Project conversation branches retain shell typography and palette. */
:is(.project-iteration-dialog, .project-idea-dialog, .project-workspace) { --record-canvas: var(--bg, #f4f7fb); --record-shadow: 0 10px 30px rgba(27, 42, 71, .08); }
html:not([data-theme="dark"]) :is(.project-iteration-dialog, .project-idea-dialog, .project-workspace) { --record-canvas: linear-gradient(180deg, #f7f9fd 0%, #f2f6fb 100%); }
html[data-theme="dark"] :is(.project-iteration-dialog, .project-idea-dialog, .project-workspace) { --record-shadow: 0 10px 30px rgba(0, 0, 0, .22); }

/* Dense grids keep their own control size inside otherwise shared records. */
:is(.ms-dialog, #app-dialog:has(.task-editor, .task-overview), .project-entity-form, .project-form:not([data-project-form="channel"]), .drive-sharing) :is(table, .task-link-grid, .project-member-row, .drive-member) { --record-field-font-size: 13px; }
#app-dialog :is(.task-editor, .task-overview) .task-link-grid { --record-field-font-size: 12px; }
:is(.project-entity-form, .project-form:not([data-project-form="channel"])) .project-member-row > input:not([type="checkbox"]) { --record-field-font-size: 10px; }
.drive-sharing .drive-member select { --record-field-font-size: 10px; }
/* Set the variable on each Task field, above inherited dense-grid values.
   The shared high-specificity font rule then preserves Task's 680px cutoff. */
@media (max-width: 680px) {
  #app-dialog :is(.task-editor, .task-overview) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) { --record-field-font-size: 16px; }
}