@layer crm-components {
/*
 * ClearFlow CRM · desktop component system
 *
 * This file is loaded last. Domain styles may define page composition, while
 * this layer owns the final geometry and appearance of shared UI components.
 */

@media screen {
  body.crm-app-page .crm-choice-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: var(--crm-space-3); min-height: 44px; }
  body.crm-app-page .crm-choice-row > input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
  body.crm-app-page .crm-refund-service { display: grid; grid-template-columns: 24px minmax(0, 1fr) 6rem; align-items: center; gap: var(--crm-space-3); min-height: 44px; }
  body.crm-app-page .crm-refund-service > input[type="checkbox"] { width: 20px; height: 20px; }
  body.crm-app-page .crm-date-dialog__body .crm-form-field--wide { grid-column: 1 / -1; }
  html:has(dialog:modal) { overflow: hidden; }

  /* Action slots share the sticky context bar with the account control. */
  body.crm-app-page .crm-topbar--actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--crm-space-3);
  }
  .crm-topbar__actions { min-width: 0; max-width: 100%; margin: 0; }
  .crm-topbar__actions.crm-back-link { width: auto; white-space: normal; }

  /* Rounded interactive surfaces keep their focus outline outside the edge.
     Heading wrappers must carry the same radius down to the actual button. */
  .crm-interactive-card > :is(h2, h3, h4, h5, h6) { border-radius: inherit; }
  .crm-interactive-card__trigger { border-radius: inherit; background-clip: padding-box; }
  .crm-interactive-card__trigger:is(:hover, :active, :focus-visible) { background: var(--crm-surface-accent-bg); }
  .crm-interactive-card__trigger:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: 2px; }

  html { font-size: 16px; }

  body.crm-app-page {
    font-family: var(--crm-font-sans);
    font-size: var(--crm-type-body);
    font-weight: 400;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--crm-color-ink);
    background: radial-gradient(circle at 92% 1%, var(--crm-ambient-2), transparent 34rem),
      radial-gradient(circle at 2% 10%, var(--crm-ambient-1), transparent 28rem),
      radial-gradient(circle at 77% 94%, var(--crm-ambient-3), transparent 32rem),
      linear-gradient(145deg, var(--crm-color-canvas), var(--crm-color-canvas-deep));
}

  /*
   * Shared visual primitives. Domain classes own data and page composition;
   * these primitives are the only source for recurring component geometry.
   */
  body.crm-app-page .crm-section-heading,
body.crm-app-page .crm-form-section__header,
body.crm-app-page .crm-finance-obligations__head,
body.crm-app-page .crm-dashboard-panel > header:not(.crm-section-header-grid) {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

body.crm-app-page .crm-catalog-toolbar,
body.crm-app-page .crm-operations-toolbar {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page :is(
    .crm-form-section__header,
    .crm-catalog-toolbar,
    .crm-operations-toolbar,
    .crm-finance-obligations__head,
    .crm-dashboard-panel > header,
    .crm-work-order-summary__money
  ) h2 {
    margin: 0.15rem 0 0;
    font-size: var(--crm-type-section);
    font-weight: 630;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

  body.crm-app-page :is(
    .crm-form-section__header,
    .crm-catalog-toolbar,
    .crm-operations-toolbar,
    .crm-finance-obligations__head,
    .crm-dashboard-panel > header
  ) > div > p:last-child {
    max-width: 68ch;
    margin: 0.35rem 0 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.5;
}

  body.crm-app-page .crm-subpanel {
    min-width: 0;
    margin: 0;
    padding: 0.9rem;
    border: 1px solid var(--crm-rule);
    border-radius: var(--crm-subpanel-radius);
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  body.crm-app-page .crm-subpanel--accent {
    border-color: var(--crm-color-border-cool);
    background: color-mix(in srgb, var(--crm-color-accent) 8%, var(--crm-panel-bg));
}

  body.crm-app-page .crm-subpanel > :is(legend, h3) {
    margin: 0;
    padding-inline: 0.2rem;
    color: var(--crm-color-ink);
    font-size: 1rem;
    font-weight: 630;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

  body.crm-app-page .crm-empty-state {
    display: grid;
    min-height: 5.5rem;
    align-content: center;
    justify-items: start;
    gap: 0.2rem;
    padding: 0.85rem;

    border-radius: var(--crm-control-radius);

    text-align: start;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-surface-inset-bg);
}

  body.crm-app-page .crm-empty-state strong {
    color: var(--crm-color-ink-soft);
    font-size: var(--crm-type-control);
    font-weight: 630;
}

  body.crm-app-page .crm-empty-state p {
    margin: 0;
    font-size: var(--crm-type-label);
    line-height: 1.45;
}

  /* Shared money-operation history for client payments and payroll payouts. */
  body.crm-app-page .crm-money-history {
    display: grid;
    min-width: 0;
    gap: 0.45rem;
}

  body.crm-app-page .crm-money-history__row {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, auto);
    align-items: start;
    gap: 1rem;
    padding: 0.78rem 0.82rem;
    border: 1px solid var(--crm-rule);
    border-radius: var(--crm-subpanel-radius);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page :is(.crm-money-history__main, .crm-money-history__details) {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 0.22rem;
}

  body.crm-app-page .crm-money-history__details {
    justify-items: end;
    text-align: end;
}

  body.crm-app-page .crm-money-history__kind {
    font-size: var(--crm-type-label);
    font-weight: 650;
}

  body.crm-app-page :is(
    .crm-money-history__meta,
    .crm-money-history__context,
    .crm-money-history__reason,
    .crm-money-history__relation
  ) {
    overflow-wrap: anywhere;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    line-height: 1.4;
}

  body.crm-app-page .crm-money-history__order {
    display: inline-flex;
    width: fit-content;
    min-height: 2.75rem;
    align-items: center;
    color: var(--crm-color-link);
    font-size: var(--crm-type-label);
    font-weight: 650;
    text-decoration: none;
}

  body.crm-app-page .crm-money-history__order:hover { text-decoration: underline; text-underline-offset: 0.16em; }
  body.crm-app-page .crm-money-history__order:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: 2px; }

  body.crm-app-page .crm-money-history__amount {
    font-size: var(--crm-type-control);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

  body.crm-app-page .crm-money-history__amount--positive { color: var(--crm-color-success); }
  body.crm-app-page .crm-money-history__amount--negative { color: var(--crm-color-danger); }

  body.crm-app-page .crm-money-history__state {
    display: grid;
    min-height: 5.5rem;
    align-content: center;
    gap: 0.2rem;
    padding: 0.85rem;
    border-radius: var(--crm-subpanel-radius);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page .crm-money-history__state strong { color: var(--crm-color-ink-soft); font-size: var(--crm-type-control); }
  body.crm-app-page .crm-money-history__state p { margin: 0; font-size: var(--crm-type-label); line-height: 1.45; }
  body.crm-app-page .crm-money-history__state--error { border-inline-start: 3px solid var(--crm-color-danger); }

  body.crm-app-page .crm-metric-strip {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--crm-rule);
    border-radius: var(--crm-control-radius);
    background: var(--crm-component-rule);
}

  body.crm-app-page .crm-metric-strip > :is(a, span, article) {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 0.16rem;
    padding: 0.72rem 0.8rem;
    color: inherit;
    background: var(--crm-subpanel-bg);
    text-decoration: none;
}

  body.crm-app-page .crm-metric-strip > :is(a, span, article):hover {
    background: var(--crm-color-accent-soft);
}

  body.crm-app-page .crm-metric-strip small {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    line-height: 1.3;
    white-space: normal;
}

  body.crm-app-page .crm-metric-strip strong {
    color: var(--crm-color-ink);
    font-size: 1rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

  body.crm-app-page button {
    font-family: inherit;
    font-optical-sizing: auto;
}

body.crm-app-page input,
body.crm-app-page select,
body.crm-app-page textarea {
    font-family: inherit;
    font-optical-sizing: auto;
    border-color: var(--crm-control-border);
    color: var(--crm-color-ink);
    background: var(--crm-control-bg);
}

  body.crm-app-page :where(.crm-main, dialog) *,
body.crm-app-page :where(.crm-main, dialog) *::before,
body.crm-app-page :where(.crm-main, dialog) *::after {
    box-sizing: border-box;
}

  body.crm-app-page :where(.crm-main, dialog) :is(h1, h2, h3, p) {
    overflow-wrap: break-word;
}

  body.crm-app-page :where(.crm-main, dialog) h1 { text-wrap: balance; }
  body.crm-app-page :where(.crm-main, dialog) p { text-wrap: pretty; }

  body.crm-app-page .crm-eyebrow {
    margin-block: 0;
    font-size: var(--crm-type-caption);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.12em;
}

  body.crm-app-page :is(.crm-operations-head, .crm-work-order-head, .crm-finance__head) h1 {
    font-size: var(--crm-type-page-adaptive, var(--crm-type-page));
    font-weight: 630;
    line-height: 1.04;
    letter-spacing: -0.045em;
}

  body.crm-app-page :is(.crm-operations-head, .crm-finance__head) > div:first-child > p:last-child {
    font-size: var(--crm-type-body);
    line-height: 1.5;
}

  body.crm-app-page :is(
    .crm-operations-toolbar,
    .crm-form-section__header,
    .crm-client-card__header,
    .crm-client-index,
    .crm-work-order-summary,
    .crm-finance-panel,
    .crm-finance-obligations__head
  ) h2 {
    margin: 0.15rem 0 0;
    font-size: var(--crm-type-section);
    font-weight: 630;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

  body.crm-app-page :where(.crm-main, dialog) :is(label, legend) {
    font-size: var(--crm-type-label);
    line-height: 1.35;
}

  body.crm-app-page :where(.crm-main, dialog) label > span:first-child {
    font-weight: 600;
}

  body.crm-app-page :where(.crm-main, dialog) .crm-form-grid > :is(label, .crm-form-field) {
    display: grid;
    min-width: 0;
    grid-template-rows: minmax(1.1rem, auto) auto minmax(1rem, auto);
    align-content: start;
    gap: 0.35rem;
}

  body.crm-app-page :where(.crm-main, dialog) .crm-form-grid > :is(label, .crm-form-field):not(:has(.crm-field-error))::after {
    content: "";
    display: block;
    min-height: 1rem;
}

  body.crm-app-page :where(.crm-main, dialog) .crm-form-grid > label.crm-form-grid__wide {
    grid-template-rows: minmax(1.1rem, auto) auto;
}

  body.crm-app-page :where(.crm-main, dialog) .crm-form-grid > label.crm-form-grid__wide::after {
    display: none;
}

  /* Shared controls */
  body.crm-app-page :where(.crm-main, dialog) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select
  ):not(:where(.crm-money-input > input, .crm-unit-input > input)) {
    width: 100%;
    min-width: 0;
    min-height: var(--crm-control-height);
    padding-block: 0.62rem;
    padding-inline: var(--crm-input-padding-start, 0.8rem) var(--crm-input-padding-end, 0.8rem);
    border: 1px solid var(--crm-control-border);
    border-radius: var(--crm-control-radius);
    color: var(--crm-color-ink);
    background-color: var(--crm-control-bg);
    box-shadow: var(--crm-control-shadow);
    font-size: var(--crm-type-control);
    font-weight: 450;
    line-height: 1.25;
}

  body.crm-app-page :where(.crm-main, dialog) textarea {
    width: 100%;
    min-width: 0;
    min-height: 5.25rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--crm-control-border);
    border-radius: var(--crm-control-radius);
    color: var(--crm-color-ink);
    background: var(--crm-control-bg);
    box-shadow: var(--crm-control-shadow);
    font-size: var(--crm-type-control);
    font-weight: 450;
    line-height: 1.45;
    resize: vertical;
}

  /* Native select chrome ignores parts of the control geometry in Safari.
     Keep the native menu/keyboard behavior, with the shared field surface and
     a theme-aware chevron. Contain the selected text so WebKit does not leak
     its intrinsic width into the page at 200% text size; the native menu keeps
     the complete options. Multiple/list selects retain their native affordance. */
  body.crm-app-page :is(.crm-main, dialog) select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    /* Clip without a scroll container: WebKit otherwise counts the border in
       scrollWidth and introduces a spurious horizontal scroll extent. */
    overflow: clip;
    text-overflow: ellipsis;
    padding-inline-end: 2.4rem;
    background-image: var(--crm-select-indicator);
    background-position: right 0.8rem center;
    background-size: 0.7rem 0.45rem;
    background-repeat: no-repeat;
}

  body.crm-app-page :where(.crm-main, dialog) :is(input, select, textarea):focus-visible {
    border-color: var(--crm-control-focus-border);
    outline: 2px solid var(--crm-control-focus-ring);
    outline-offset: 1px;
}

  /* A shared primitive must yield geometry to a named component variant. */
  :where(body.crm-app-page) :where(.crm-main, dialog) :is(.crm-button, .crm-table-action, .crm-icon-action) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--crm-control-height);
    padding: 0.62rem clamp(8px, 0.9rem, 16px);
    border: 1px solid transparent;
    border-radius: var(--crm-control-radius);
    font-size: var(--crm-type-control);
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    white-space: normal;
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: var(--crm-motion-fast);
    transition-timing-function: var(--crm-ease);
}

  body.crm-app-page :where(.crm-main, dialog) .crm-button--primary {
    border-color: var(--crm-action-primary-border);
    color: var(--crm-color-on-accent);
    background: var(--crm-action-primary-bg);
    box-shadow: var(--crm-action-primary-shadow);
}

  /* Both document-return links are the same secondary button primitive. */
  body.crm-app-page .crm-back-link {
    gap: var(--crm-space-2);
    min-height: max(var(--crm-control-height), 44px);
    margin-bottom: var(--crm-space-2);
    max-width: 100%;
    white-space: normal;
}

  body.crm-app-page .crm-back-link > svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

  body.crm-app-page :where(.crm-main, dialog) .crm-button--primary:hover {
    background: var(--crm-action-primary-bg-hover);
    box-shadow: var(--crm-action-primary-shadow-hover);
}

  body.crm-app-page :where(.crm-main, dialog) :is(.crm-button--secondary, .crm-table-action, .crm-icon-action) {
    border-color: var(--crm-action-secondary-border);
    color: var(--crm-color-ink);
    background: var(--crm-action-secondary-bg);
    box-shadow: var(--crm-action-secondary-shadow);
}

  body.crm-app-page :where(.crm-main, dialog) :is(.crm-button--secondary, .crm-table-action, .crm-icon-action):hover {
    background: var(--crm-action-secondary-bg-hover);
    box-shadow: var(--crm-action-secondary-shadow-hover);
}

  body.crm-app-page :where(.crm-main, dialog) .crm-text-button {
    display: inline-flex;
    min-height: var(--crm-control-height);
    align-items: center;
    justify-content: center;
    padding-inline: 0.8rem;
    border: 0;
    border-radius: var(--crm-control-radius);
    color: var(--crm-color-link);
    background: transparent;
    font-size: var(--crm-type-label);
    font-weight: 600;
    text-decoration: none;
    transition-property: color, background-color, transform;
    transition-duration: var(--crm-motion-fast);
    transition-timing-function: var(--crm-ease);
}

  body.crm-app-page :where(.crm-main, dialog) .crm-text-button:hover {
    color: var(--crm-color-link-hover);
    background: var(--crm-color-accent-soft);
}

  body.crm-app-page :where(.crm-main, dialog) .crm-icon-action {
    display: inline-grid;
    width: var(--crm-control-height);
    min-width: var(--crm-control-height);
    padding: 0;
    place-items: center;
    font-size: 1rem;
}

  body.crm-app-page :where(.crm-main, dialog) :is(.crm-button, .crm-icon-action, .crm-text-button):active {
    transform: scale(0.96);
}

  body.crm-app-page .crm-button--danger {
    color: var(--crm-action-danger-ink);
    border-color: var(--crm-action-danger-border);
    background: var(--crm-action-danger-bg);
}

  body.crm-app-page .crm-button--danger:hover {
    border-color: var(--crm-action-danger-border-hover);
    background: var(--crm-action-danger-bg-hover);
}

  /* Money and unit controls are real two-cell components, never overlays. */
  body.crm-app-page :is(.crm-money-input, .crm-unit-input) {
    display: grid;
    min-width: 0;
    min-height: var(--crm-control-height);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--crm-control-border);
    border-radius: var(--crm-control-radius);
    background: var(--crm-control-bg);
    box-shadow: var(--crm-control-shadow);
}

  body.crm-app-page :is(.crm-money-input, .crm-unit-input):focus-within {
    border-color: var(--crm-control-focus-border);
    outline: 2px solid var(--crm-control-focus-ring);
    outline-offset: 1px;
}

  body.crm-app-page :where(.crm-main, dialog) :is(.crm-money-input, .crm-unit-input) > input {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--crm-control-height) - 2px);
    padding: 0.6rem 0.35rem 0.6rem 0.8rem;
    border: 0;
    border-radius: 0;
    outline: 0;
    color: var(--crm-color-ink);
    -webkit-text-fill-color: var(--crm-color-ink);
    background: transparent;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

  body.crm-app-page :where(.crm-main, dialog) :is(.crm-money-input, .crm-unit-input) > input:focus-visible {
    border: 0;
    outline: 0;
}

  body.crm-app-page :is(.crm-money-input, .crm-unit-input) > i {
    position: static;
    display: grid;
    min-width: 2rem;
    padding-inline: 0.2rem 0.75rem;
    place-items: center;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    font-style: normal;
    transform: none;
    pointer-events: none;
}

  /* Shared panels and section rhythm */
  body.crm-app-page .crm-form-section {
    min-width: 0;
    padding: var(--crm-inset);
    border-radius: var(--crm-panel-radius);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

body.crm-app-page .crm-finance-panel {
    min-width: 0;
    padding: var(--crm-inset);
    border-radius: var(--crm-panel-radius);
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

body.crm-app-page .crm-finance-obligations {
    min-width: 0;
    padding: var(--crm-inset);
    border-radius: var(--crm-panel-radius);
}

  body.crm-app-page .crm-form-section__header,
body.crm-app-page .crm-finance-obligations__head {
    align-items: center;
}

body.crm-app-page .crm-operations-toolbar {
    align-items: center;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page .crm-form-section__header {
    gap: 1rem;
    margin-block-end: 0.85rem;
}

  body.crm-app-page .crm-form-grid {
    display: grid;
    min-width: 0;
    gap: var(--crm-gap);
    margin-block-start: 0.75rem;
}

  body.crm-app-page .crm-form-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  body.crm-app-page .crm-form-grid :is(input, select, textarea) { min-width: 0; max-width: 100%; }
  body.crm-app-page .crm-form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.crm-app-page .crm-form-grid__wide { grid-column: 1 / -1; }

  /* Shared searchable directory picker. */
  body.crm-app-page .crm-form-field > label {
    font-weight: 600;
}

  body.crm-app-page .crm-form-hint {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    line-height: 1.4;
}

  body.crm-app-page .crm-combobox {
    position: relative;
    min-width: 0;
}

  body.crm-app-page .crm-form-section--popover {
    position: relative;
    z-index: var(--crm-z-content);
    overflow: visible;
    isolation: isolate;
}

  body.crm-app-page .crm-form-section--popover:has(.crm-combobox.is-open) {
    z-index: calc(var(--crm-z-sticky) - 1);
}

  /* The glass surface gives every direct child its own stacking context. Raise
     the whole row while its directory picker is open; raising only the
     listbox still lets later form rows paint over it. The section's parent
     stacking context keeps all of these children below the sticky topbar. */
  body.crm-app-page .crm-form-section--popover:has(.crm-combobox.is-open) > .crm-form-grid:has(.crm-combobox.is-open) {
    z-index: var(--crm-z-popover);
}

  body.crm-app-page .crm-form-field:has(.crm-combobox.is-open) {
    position: relative;
    z-index: var(--crm-z-popover);
}

  body.crm-app-page .crm-combobox.is-open {
    z-index: var(--crm-z-popover);
}

  body.crm-app-page .crm-combobox__control {
    position: relative;
}

  body.crm-app-page :where(.crm-main, dialog) .crm-combobox__control > input {
    --crm-input-padding-end: calc(var(--crm-control-height) + 0.35rem);
    padding-inline-end: var(--crm-input-padding-end);
}

  body.crm-app-page .crm-combobox__control > input::-webkit-search-cancel-button {
    appearance: none;
}

  body.crm-app-page .crm-combobox__toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: grid;
    width: var(--crm-control-height);
    min-height: var(--crm-control-height);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0 var(--crm-control-radius) var(--crm-control-radius) 0;
    color: var(--crm-color-ink-muted);
    background: transparent;
    font-size: 1.1rem;
}

  body.crm-app-page .crm-combobox__toggle::before {
    content: "⌄";
  }

  body.crm-app-page .crm-combobox__toggle:hover {
    color: var(--crm-color-ink);
    background: var(--crm-color-accent-soft);
}

  body.crm-app-page .crm-combobox__toggle:focus-visible {
    outline: 2px solid var(--crm-color-focus);
    outline-offset: -3px;
}

  body.crm-app-page .crm-combobox__listbox {
    position: absolute;
    z-index: var(--crm-z-popover);
    inset-block-start: calc(100% + 0.35rem);
    inset-inline: 0;
    max-height: min(12.5rem, 34vh);
    padding: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--crm-color-border-strong);
    border-radius: var(--crm-control-radius);
    background: var(--crm-color-surface-strong);
    box-shadow: var(--crm-shadow-elevated);
}

  body.crm-app-page .crm-combobox__listbox[hidden] {
    display: none;
}

  body.crm-app-page .crm-combobox__option {
    display: flex;
    min-height: var(--crm-control-height);
    align-items: center;
    padding: 0.62rem 0.7rem;
    border-radius: calc(var(--crm-control-radius) - 0.2rem);
    color: var(--crm-color-ink);
    cursor: default;
}

  body.crm-app-page .crm-combobox__option:is(:hover, .is-active) {
    background: var(--crm-color-accent-soft);
}

  body.crm-app-page .crm-combobox__option[aria-selected="true"] {
    box-shadow: inset 3px 0 0 var(--crm-color-accent);
}

  body.crm-app-page .crm-combobox__option-copy {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

  body.crm-app-page .crm-combobox__option-copy strong,
body.crm-app-page .crm-combobox__option-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

  body.crm-app-page .crm-combobox__option-copy strong {
    font-size: var(--crm-type-control);
    font-weight: 620;
}

  body.crm-app-page .crm-combobox__option-copy small {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
}

  /* Shared quiet notice: use for contextual information, never as a data grid. */
  body.crm-app-page .crm-inline-notice {
    display: flex;
    min-width: 0;
    min-height: var(--crm-control-height);
    align-items: center;
    margin-block-start: var(--crm-gap);
    padding: 0.7rem 0.85rem;
    overflow: visible;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-subpanel-radius);
    color: var(--crm-color-ink-soft);
    background: var(--crm-subpanel-bg);
    font-size: var(--crm-type-label);
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

  /* Shared hierarchical picker used for large reference directories. */
  body.crm-app-page .crm-vehicle-picker {
    display: grid;
    min-width: 0;
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem;
    border: 1px solid var(--crm-rule);
    border-radius: var(--crm-subpanel-radius);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page .crm-vehicle-picker > legend {
    padding-inline: 0.3rem;
    color: var(--crm-color-ink-soft);
    font-weight: 620;
}

  body.crm-app-page .crm-vehicle-picker__controls {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--crm-gap);
}

  body.crm-app-page .crm-vehicle-picker__controls > label,
body.crm-app-page .crm-vehicle-picker__manual {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
    color: var(--crm-color-ink-soft);
    font-size: var(--crm-type-label);
}

  body.crm-app-page .crm-vehicle-picker__manual-toggle {
    width: fit-content;
    min-height: 2.5rem;
    justify-self: start;
}

  body.crm-app-page .crm-vehicle-picker__manual[hidden] { display: none; }

  body.crm-app-page .crm-vehicle-picker__manual small {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    font-weight: 450;
}

  /* Shared two-or-more option selector for entity type and similar choices. */
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group {
    display: grid;
    grid-template-columns: repeat(var(--crm-choice-columns, 2), minmax(0, 1fr));
    gap: 0.5rem;
    margin-block: 0.85rem;
}

  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group > label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group input {
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    inline-size: 1.125rem;
    block-size: 1.125rem;
    min-inline-size: 0;
    min-block-size: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--crm-color-accent);
    box-shadow: none;
    cursor: inherit;
}

  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group label > span {
    display: grid;
    min-height: var(--crm-choice-min-height, 4.25rem);
    height: 100%;
    align-content: center;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    padding-inline-start: 2.65rem;
    border: 1px solid var(--crm-rule);
    border-radius: var(--crm-control-radius);
    color: var(--crm-color-ink-soft);
    background: var(--crm-subpanel-bg);
    box-shadow: var(--crm-control-shadow);
    transition: border-color var(--crm-motion-fast) var(--crm-ease), background-color var(--crm-motion-fast) var(--crm-ease), box-shadow var(--crm-motion-fast) var(--crm-ease);
}

  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group strong { font-size: var(--crm-type-control); font-weight: 630; }
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group small { color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); font-weight: 450; line-height: 1.35; }
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group input:checked + span { border-color: var(--crm-color-border-hot); color: var(--crm-color-link); background: var(--crm-surface-accent-bg); box-shadow: var(--crm-shadow-interactive); }
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group input:focus-visible + span,
body:is(.crm-app-page, .crm-auth-page) .crm-choice-group input[type="radio"]:focus + span { outline: 2px solid var(--crm-color-focus); outline-offset: 2px; }
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group input[aria-invalid="true"] + span { border-color: var(--crm-color-danger); }
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group input:disabled + span { cursor: not-allowed; opacity: 0.58; }
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group--stacked { --crm-choice-columns: 1; --crm-choice-min-height: var(--crm-control-height); margin: 0; }
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group--compact { --crm-choice-min-height: var(--crm-control-height); }
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group--compact input { inset-inline-start: var(--crm-space-2); }
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group--compact label > span {
    padding-inline: calc(1.125rem + 2 * var(--crm-space-2)) var(--crm-space-2);
    font-size: var(--crm-type-label);
    white-space: nowrap;
}

  /* One tab component for Cabinet and Finance. */
  body.crm-app-page .crm-section-tabs {
    display: grid;
    width: 100%;
    gap: 0.25rem;
    margin: 0 0 var(--crm-gap);
    padding: 0.3rem;
    border: 1px solid var(--crm-rule);
    border-radius: 1rem;
    background: var(--crm-subpanel-bg);
    box-shadow: var(--crm-shadow-base);
}

  body.crm-app-page .crm-section-tabs--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.crm-app-page .crm-section-tabs--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.crm-app-page .crm-section-tabs--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.crm-app-page .crm-section-tabs--seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  body.crm-app-page .crm-section-tabs--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.crm-app-page .crm-section-tabs--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body.crm-app-page .crm-section-tabs button {
    min-width: 0;
    min-height: var(--crm-control-height);
    padding: 0.62rem 0.8rem;
    border: 0;
    border-radius: 0.72rem;
    color: var(--crm-color-ink-soft);
    background: transparent;
    font-size: var(--crm-type-control);
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition-property: color, background-color, box-shadow, transform;
    transition-duration: var(--crm-motion-fast);
    transition-timing-function: var(--crm-ease);
}

  body.crm-app-page .crm-section-tabs--seven button {
    white-space: normal;
    line-height: 1.2;
    text-wrap: balance;
}

  body.crm-app-page .crm-section-tabs button[aria-selected="true"] {
    border-color: var(--crm-color-border-hot);
    color: var(--crm-color-link);
    background: color-mix(in srgb, var(--crm-color-accent) 12%, var(--crm-color-surface-strong));
    box-shadow: var(--crm-shadow-interactive);
}

  body.crm-app-page .crm-section-tabs button:active { transform: scale(0.96); }
  body.crm-app-page .crm-section-tabs button:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: 2px; }

  body.crm-app-page .crm-context-line {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

  body.crm-app-page .crm-context-line .crm-eyebrow {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

  body.crm-app-page .crm-context-trigger {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding-inline: 0.65rem;
    border: 1px solid var(--crm-action-secondary-border);
    border-radius: var(--crm-control-radius);
    color: var(--crm-color-link);
    background: var(--crm-action-secondary-bg);
    box-shadow: var(--crm-action-secondary-shadow);
    font: inherit;
    font-size: var(--crm-type-label);
    font-weight: 600;
    cursor: pointer;
}

  body.crm-app-page .crm-context-trigger svg { width: 1rem; height: 1rem; }
  body.crm-app-page .crm-context-trigger:hover { background: var(--crm-action-secondary-bg-hover); }
  body.crm-app-page .crm-context-trigger:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: 2px; }

  body.crm-app-page .crm-context-dialog .crm-date-dialog__form { width: min(44rem, calc(100vw - 3rem)); }
  body.crm-app-page .crm-context-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-component-gap);
}
  body.crm-app-page .crm-context-form__footer .crm-date-dialog__actions { margin: 0; padding: 0; border: 0; }

  /* Shared dialog shell */
  body.crm-app-page dialog.crm-date-dialog {
    width: min(46rem, calc(100vw - 3rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--crm-color-border-strong);
    border-radius: var(--crm-dialog-radius);



    overscroll-behavior: contain;
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-color-glass-dense);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-elevated);
}

  body.crm-app-page dialog.crm-demo-dialog {
    width: min(46rem, calc(100vw - 3rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--crm-color-border-strong);
    border-radius: var(--crm-dialog-radius);
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-color-glass-dense);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-elevated);
}

  body.crm-planner-page dialog.crm-demo-dialog.crm-planner-detail-dialog {
    width: min(38rem, calc(100vw - 3rem));
}

  body.crm-app-page dialog.crm-demo-dialog > .crm-demo-dialog__content {
    display: grid;
    width: 100%;
    max-height: calc(100vh - 2rem);
    gap: var(--crm-gap);
    padding: var(--crm-inset);
    overflow-x: hidden;
    overflow-y: auto;
}

  body.crm-app-page dialog.crm-catalog-dialog,
body.crm-app-page dialog.crm-inventory-dialog {
    width: min(58rem, calc(100vw - 3rem));
}

  body.crm-app-page dialog.crm-category-dialog { width: min(52rem, calc(100vw - 3rem)); }
  body.crm-app-page dialog.crm-obligation-dialog { width: min(46rem, calc(100vw - 3rem)); }
  body.crm-app-page dialog.crm-payout-dialog { width: min(38rem, calc(100vw - 3rem)); }
  body.crm-app-page dialog.crm-waitlist-dialog { width: min(80rem, calc(100vw - 3rem)); }

  body.crm-app-page dialog.crm-date-dialog > :is(form, section, div.crm-date-dialog__form) {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    gap: var(--crm-gap);
    padding: var(--crm-inset);
    overflow-x: hidden;
    overflow-y: auto;
}

  body.crm-app-page .crm-date-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
}

  body.crm-app-page .crm-date-dialog__header h2 {
    margin: 0.15rem 0 0;
    font-size: var(--crm-type-dialog);
    font-weight: 630;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

  body.crm-app-page dialog.crm-date-dialog--scrollable {
    inset: 0;
    max-height: calc(100dvh - 2rem);
  }

  body.crm-app-page .crm-context-line [data-context-adjacent-action] { min-height: 2.75rem; width: auto; margin: 0; }
  body.crm-app-page dialog.crm-date-dialog--scrollable[open] { display: flex; flex-direction: column; }
  body.crm-app-page .crm-date-dialog--scrollable .crm-date-dialog__header h2 { font-weight: 600; }
  .crm-date-dialog--scrollable > .crm-date-dialog__header,
  .crm-date-dialog--scrollable > .crm-date-dialog__footer { flex: 0 0 auto; padding: var(--crm-inset); }
  .crm-date-dialog--scrollable > .crm-date-dialog__body { min-height: 0; min-width: 0; padding: var(--crm-inset); overflow-y: auto; overscroll-behavior: contain; }
  .crm-date-dialog--scrollable > .crm-date-dialog__header { border-bottom: 1px solid var(--crm-color-border); }
  .crm-date-dialog--scrollable > .crm-date-dialog__footer { border-top: 1px solid var(--crm-color-border); }
  .crm-date-dialog--scrollable .crm-date-dialog__footer > p { margin-block: 0 var(--crm-space-3); }
  .crm-date-dialog--scrollable .crm-date-dialog__close { min-width: 44px; min-height: 44px; }

  body.crm-app-page .crm-date-dialog__close {
    display: grid;
    width: var(--crm-control-height);
    height: var(--crm-control-height);
    min-width: var(--crm-control-height);
    min-height: var(--crm-control-height);
    padding: 0;
    place-items: center;
    border: 1px solid var(--crm-component-rule);
    border-radius: 50%;



    font-size: 1.2rem;
    border-color: var(--crm-action-secondary-border);
    color: var(--crm-color-ink-soft);
    background: var(--crm-action-secondary-bg);
    box-shadow: var(--crm-action-secondary-shadow);
}

  body.crm-app-page .crm-date-dialog__close:focus:not(:focus-visible) { outline: 0; }
  body.crm-app-page .crm-date-dialog__close:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: 2px; }

  body.crm-app-page .crm-date-dialog__description {
    max-width: 68ch;
    margin: 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.5;
}

  body.crm-app-page .crm-date-dialog__actions,
body.crm-app-page .crm-catalog-form__actions {
    position: static;
    bottom: auto;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0 0;
    border-block-start: 1px solid var(--crm-rule);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

  body.crm-app-page .crm-date-dialog__actions .crm-button,
body.crm-app-page .crm-catalog-form__actions .crm-button {
    width: auto;
    min-width: 7.5rem;
}

  body.crm-app-page .crm-catalog-form__archive { margin-inline-end: auto; }

  /* Catalog editors */
  body.crm-app-page dialog.crm-catalog-dialog .crm-catalog-form,
body.crm-app-page dialog.crm-inventory-dialog .crm-catalog-form {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 0.85rem;
}

  body.crm-app-page dialog.crm-catalog-dialog .crm-catalog-form__grid,
body.crm-app-page dialog.crm-inventory-dialog .crm-catalog-form__grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--crm-gap);
}

  body.crm-app-page dialog.crm-catalog-dialog .crm-catalog-form__grid--identity {
    grid-template-columns: minmax(8rem, 0.62fr) minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1fr);
}

  body.crm-app-page dialog.crm-inventory-dialog .crm-catalog-form__grid--identity {
    grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr);
}

  body.crm-directories-page dialog.crm-catalog-dialog .crm-directory-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

  body.crm-app-page dialog.crm-catalog-dialog :is(
    .crm-catalog-form > label,
    .crm-catalog-form__grid > label,
    .crm-service-payroll__grid > label
  ),
body.crm-app-page dialog.crm-inventory-dialog :is(
    .crm-catalog-form > label,
    .crm-catalog-form__grid > label
  ) {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
    color: var(--crm-color-ink-soft);
    font-size: var(--crm-type-label);
    font-weight: 500;
}

  body.crm-app-page dialog.crm-catalog-dialog .crm-catalog-form__check {
    display: grid;
    min-height: var(--crm-control-height);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    border: 0;
    border-radius: var(--crm-control-radius);
    background: transparent;
    align-self: end;
    justify-self: start;
    min-height: 44px;
}

  body.crm-app-page dialog.crm-catalog-dialog .crm-catalog-form__grid > .crm-catalog-form__check { align-self: center; }

  body.crm-app-page dialog.crm-catalog-dialog .crm-catalog-form__check input {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 1.15rem;
    margin: 0;
}

  body.crm-app-page dialog.crm-catalog-dialog :is(.crm-service-payroll, .crm-service-materials) {
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--crm-rule);
    border-radius: 1rem;
    background: var(--crm-surface-inset-bg);
    box-shadow: none;
}

  body.crm-app-page dialog.crm-catalog-dialog :is(.crm-service-payroll, .crm-service-materials) > legend {
    padding-inline: 0.25rem;
    color: var(--crm-color-ink);
    font-size: var(--crm-type-control);
    font-weight: 630;
}

  body.crm-app-page dialog.crm-catalog-dialog :is(.crm-service-payroll, .crm-service-materials) > p {
    margin: 0 0 0.75rem;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.5;
}

  body.crm-services-page dialog.crm-catalog-dialog .crm-service-materials__list {
    display: grid;
    gap: var(--crm-space-3);
}

  body.crm-services-page dialog.crm-catalog-dialog .crm-service-material-row {
    display: grid;
    grid-template-columns: minmax(10rem, 0.8fr) minmax(15rem, 1.4fr) minmax(9rem, 0.6fr) var(--crm-control-height);
    align-items: end;
    gap: var(--crm-space-3);
    padding: var(--crm-space-3);
    border: 1px solid var(--crm-rule);
    border-radius: var(--crm-control-radius);
    background: var(--crm-surface-raised-bg);
}

  body.crm-services-page dialog.crm-catalog-dialog .crm-service-material-row > label { min-width: 0; }
  body.crm-services-page dialog.crm-catalog-dialog .crm-service-material-row :is(select, input) { width: 100%; min-width: 0; }
  body.crm-services-page dialog.crm-catalog-dialog #crm-service-material-add { margin-block-start: var(--crm-space-3); }
  body.crm-services-page dialog.crm-catalog-dialog #crm-service-inventory-consumption-error:not(:empty) { display: block; margin-block-start: var(--crm-space-2); }

  body.crm-app-page dialog.crm-catalog-dialog .crm-service-payroll__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--crm-gap);
}



  /* Finance dialogs */
  body.crm-app-page dialog.crm-obligation-dialog .crm-date-dialog__form,
body.crm-app-page dialog.crm-payout-dialog .crm-date-dialog__form {
    width: 100%;
    gap: 0.85rem;
}

  body.crm-app-page .crm-obligation-dialog__balance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

  body.crm-app-page .crm-obligation-dialog__balance > span {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
    padding: 0.75rem;
    border-radius: 0.85rem;
    background: var(--crm-surface-inset-bg);
}

  body.crm-app-page .crm-obligation-dialog__balance small {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
}

  body.crm-app-page .crm-obligation-dialog__balance strong {
    color: var(--crm-color-ink);
    font-size: 1rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

  body.crm-app-page dialog.crm-obligation-dialog #crm-obligation-dialog-content {
    display: grid;
    min-height: 0;
    max-height: min(52vh, 28rem);
    gap: 0.45rem;
    overflow: auto;
}

  body.crm-app-page dialog.crm-obligation-dialog #crm-obligation-dialog-content > h3 {
    margin: 0.5rem 0 0;
    font-size: var(--crm-type-control);
    font-weight: 630;
}

  body.crm-app-page dialog.crm-obligation-dialog .crm-obligation-detail-list > * {
    padding-block: 0.65rem;
    font-size: var(--crm-type-label);
}

  /* Work-order composition */
  body.crm-work-order-page .crm-work-order-primary {
    gap: var(--crm-gap);
}

  body.crm-work-order-page .crm-work-order-primary > .crm-form-section {
    padding: var(--crm-inset);
    border-radius: var(--crm-panel-radius);
}

  body.crm-work-order-page .crm-work-order-primary .crm-form-section__header h2,
body.crm-work-order-page .crm-order-checklists .crm-form-section__header h2 {
    font-size: var(--crm-type-section);
    font-weight: 630;
}

  body.crm-work-order-page .crm-order-items-table { min-width: 0; overflow-x: auto; }
  @media screen and (min-width: 1181px) {
    body.crm-work-order-page .crm-order-items-table > :is(.crm-order-items-head, .crm-order-items) { width: max(100%, 52rem); }
  }
  body.crm-work-order-page .crm-order-items-head,
body.crm-work-order-page .crm-order-item {
    grid-template-columns: minmax(11rem, 1.75fr) minmax(4rem, 0.38fr) minmax(6.5rem, 0.72fr) minmax(6.5rem, 0.72fr) minmax(5.5rem, 0.56fr) minmax(5.5rem, 0.56fr) var(--crm-control-height);
    gap: 0.5rem;
}

  body.crm-work-order-page .crm-order-items-head {
    margin-block-start: 0.65rem;
    padding: 0 0.65rem 0.35rem;
    font-size: var(--crm-type-caption);
}

  body.crm-work-order-page .crm-order-item {
    min-width: 0;
    align-items: start;
    padding: 0.65rem;
    border-radius: 1rem;
}

  body.crm-work-order-page .crm-order-item__service > small {
    display: block;
    min-height: 1rem;
    margin-block-start: 0.3rem;
    line-height: 1.35;
}

  body.crm-work-order-page .crm-order-item > output {
    display: flex;
    min-height: var(--crm-control-height);
    align-items: center;
    justify-content: flex-end;
}

  body.crm-work-order-page .crm-order-item > [data-remove-item] {
    align-self: start;
}

  body.crm-work-order-page .crm-order-item output {
    min-width: 0;
    overflow: hidden;
    font-size: var(--crm-type-label);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

  body.crm-work-order-page .crm-order-item__assignment {
    grid-column: 1 / -1;
}

  body.crm-work-order-page .crm-control-inspection {
    padding: 0.9rem;
}

  body.crm-work-order-page .crm-control-inspection__toggle {
    min-height: var(--crm-control-height);
}

  body.crm-work-order-page .crm-control-inspection__toggle strong { font-size: var(--crm-type-control); }
  body.crm-work-order-page .crm-control-inspection__toggle small { font-size: var(--crm-type-caption); }

  body.crm-work-order-page .crm-order-checklists__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--crm-gap);
}

  body.crm-work-order-page .crm-order-checklist {
    min-width: 0;
    margin: 0;
    padding: 0.9rem;
}

  body.crm-work-order-page .crm-order-checklist legend {
    padding-inline: 0.2rem;
    font-size: 1rem;
    font-weight: 630;
}

  body.crm-work-order-page .crm-order-checklist__items {
    gap: 0.4rem;
    margin-block: 0.45rem 0.65rem;
}

  body.crm-work-order-page .crm-order-checklist__item {
    grid-template-columns: var(--crm-touch-target) minmax(0, 1fr) var(--crm-control-height);
    gap: 0.45rem;
}

  body.crm-work-order-page .crm-order-checklist__item input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

  body.crm-work-order-page .crm-order-checklist > label {
    margin-block-start: 0.75rem;
    font-size: var(--crm-type-label);
}

  body.crm-work-order-page .crm-order-checklist textarea { min-height: 5rem; }

  body.crm-work-order-page .crm-payment-entry {
    display: grid;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-block-start: 0.7rem;
}

  body.crm-work-order-page #crm-payment-rows { display: grid; min-width: 0; gap: 0.5rem; }

  body.crm-work-order-page .crm-payment-batch-row {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(9rem, 1.2fr) minmax(8rem, 0.8fr) minmax(8rem, 0.8fr) var(--crm-control-height);
    align-items: end;
    gap: 0.5rem;
    padding: 0.65rem;
    border: 1px solid var(--crm-rule);
    border-radius: 0.9rem;
    background: var(--crm-subpanel-bg);
}

  body.crm-work-order-page .crm-payment-batch-row > label {
    display: grid;
    min-width: 0;
    grid-template-rows: minmax(1.1rem, auto) var(--crm-control-height);
    align-content: end;
    gap: 0.35rem;
}

  body.crm-work-order-page .crm-payment-batch-row > label:first-child { grid-column: auto; }
  body.crm-work-order-page .crm-payment-batch-row :is(.crm-money-input, select, input, [data-remove-payment]) {
    height: var(--crm-control-height);
    min-height: var(--crm-control-height);
    margin-block: 0;
    vertical-align: middle;
}
  body.crm-work-order-page .crm-payment-batch-row .crm-money-input > input {
    height: calc(var(--crm-control-height) - 2px);
    min-height: calc(var(--crm-control-height) - 2px);
    line-height: 1.2;
}
  body.crm-work-order-page .crm-payment-batch-row select {
    padding-block: 0;
    line-height: normal;
}
  body.crm-work-order-page .crm-payment-batch-row__payer { grid-column: 1 / -1; }
  body.crm-work-order-page .crm-payment-batch-row > [data-remove-payment] { align-self: end; justify-self: stretch; }

  body.crm-work-order-page .crm-payment-entry__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 0.5rem;
}

  body.crm-work-order-page .crm-payment-entry__actions .crm-button {
    width: 100%;
    min-height: var(--crm-control-height);
    height: auto;
    grid-column: auto;
}

  /* Existing utility areas retained under the same component contract. */
  body.crm-app-page fieldset.crm-business-format {
    min-width: 0;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border: 0;
    border-block-start: 1px solid var(--crm-rule);
}

  body.crm-app-page .crm-business-format > legend {
    padding: 0;
    font-size: 1rem;
    font-weight: 630;
}

  body.crm-app-page .crm-client-workspace { align-items: stretch; }
  body.crm-app-page .crm-client-index { align-self: stretch; max-height: none; border-color: var(--crm-color-border); background: var(--crm-panel-bg); box-shadow: var(--crm-shadow-base); }
  body.crm-app-page .crm-client-list { max-height: none; overflow: visible; }
  body.crm-app-page .crm-client-card__actions { display: flex; align-items: center; gap: 0.5rem; }

  /* One surface contract for every numbered block in the organization cabinet. */
  body.crm-settings-page .crm-settings-side {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

  body.crm-settings-page .crm-settings-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--crm-rule);
    border-radius: var(--crm-panel-radius);
    background: var(--crm-panel-bg);
    background-clip: padding-box;
    box-shadow: var(--crm-shadow-base);
}

  body.crm-settings-page .crm-settings-card::before {
    content: none;
}

  body.crm-app-page .crm-settings-identifiers {
    grid-column: 1 / -1;
    display: grid;
    min-width: 0;
    gap: var(--crm-component-gap);
    padding: var(--crm-component-inset);
}

  body.crm-app-page .crm-settings-identifiers__head {
    margin: 0;
}

  body.crm-app-page .crm-settings-identifiers__head p:last-child {
    max-width: 72ch;
    margin: 0.35rem 0 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.5;
}

  body.crm-app-page .crm-identifier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

  body.crm-app-page .crm-identifier-grid > label {
    display: grid;
    min-width: 0;
    grid-template-rows: minmax(1.1rem, auto) var(--crm-control-height) minmax(1rem, auto) 1rem;
    align-content: start;
    gap: 0.3rem;
}

  body.crm-app-page .crm-identifier-grid > label > span {
    color: var(--crm-color-ink-soft);
    font-size: var(--crm-type-label);
    font-weight: 620;
}

  body.crm-app-page .crm-identifier-grid > label > small:not(.crm-field-error) {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    line-height: 1.35;
}

  body.crm-app-page .crm-settings-identifiers .crm-inline-note {
    margin: 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    line-height: 1.45;
}

  body.crm-app-page .crm-settings-history { grid-column: 1 / -1; min-height: 0; max-height: none; }
  body.crm-app-page .crm-settings-history__head { margin-block-end: 0; }
  body.crm-app-page .crm-settings-history__head p { max-width: 56rem; }
  body.crm-app-page .crm-settings-history__filters { display: grid; grid-template-columns: 1.2fr repeat(2, 1fr) repeat(2, 0.8fr); gap: 0.65rem; padding-block: 0.85rem; }
  body.crm-app-page .crm-settings-history__filters label { display: grid; align-content: start; gap: 0.25rem; }
  body.crm-app-page .crm-settings-history__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.75fr); gap: var(--crm-gap); }
  body.crm-app-page .crm-settings-history__grid > section { align-self: start; }
  body.crm-app-page .crm-settings-history__grid h3 { margin: 0 0 0.6rem; }
  body.crm-app-page :is(.crm-audit-list, .crm-archive-list) { display: grid; gap: 0.35rem; }
  body.crm-app-page :is(.crm-audit-list, .crm-archive-list) article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 3.5rem; padding: 0.6rem 0.75rem; border: 1px solid var(--crm-rule); border-radius: 0.85rem; border-color: var(--crm-component-rule); color: var(--crm-color-ink); background: var(--crm-subpanel-bg); }
  body.crm-app-page .crm-audit-list { container-type: inline-size; }
  body.crm-app-page .crm-audit-list article { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  body.crm-app-page .crm-audit-event__copy { display: grid; min-width: 0; gap: 0.2rem; }
  body.crm-app-page .crm-audit-event__copy strong { min-width: 0; font-size: var(--crm-type-body); line-height: 1.35; overflow-wrap: anywhere; }
  body.crm-app-page .crm-audit-event__copy small { color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); line-height: 1.35; }
  body.crm-app-page .crm-audit-event__type { color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); line-height: 1.35; text-align: start; overflow-wrap: anywhere; }

  @container (min-width: 42rem) {
    body.crm-app-page .crm-audit-list article { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
    body.crm-app-page .crm-audit-event__type { text-align: end; }
  }

  body.crm-app-page .crm-settings-theme {
    grid-column: 1 / -1;
    display: grid;
    min-width: 0;
    gap: var(--crm-component-gap);
    padding: var(--crm-component-inset);
}

  body.crm-app-page .crm-settings-theme__head {
    margin: 0;
}

  body.crm-app-page .crm-settings-theme__head p:last-child {
    max-width: 72ch;
    margin: 0.35rem 0 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.5;
}

  body.crm-app-page .crm-theme-picker {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

  body.crm-app-page .crm-theme-picker > p {
    margin: 0 0 0.75rem;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.45;
}

  body.crm-app-page .crm-theme-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 0.65rem;
}

  body.crm-app-page .crm-personal-appearance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem 1.4rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--crm-component-rule);
}

  body.crm-app-page .crm-personal-appearance h3,
body.crm-app-page .crm-personal-appearance p { margin: 0; }
  body.crm-app-page .crm-personal-appearance h3 { font-size: var(--crm-type-section); }
  body.crm-app-page .crm-personal-appearance > div:first-child > p:last-child {
    max-width: 60ch;
    margin-block-start: 0.35rem;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.5;
}

  body.crm-app-page .crm-personal-appearance__controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    align-items: end;
    gap: 0.65rem;
}

  body.crm-app-page .crm-personal-appearance__controls label {
    display: grid;
    gap: 0.3rem;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
}

  body.crm-app-page .crm-personal-appearance__controls button { height: auto; white-space: normal; }

  body.crm-app-page .crm-personal-appearance__controls :is(select, button) {
    min-height: var(--crm-control-height);
}

  body.crm-app-page .crm-personal-appearance > :is(small, p) { grid-column: 1 / -1; }

  body.crm-app-page .crm-theme-option {
    --crm-theme-swatch: var(--crm-preview-blue);
    --crm-theme-swatch-soft: var(--crm-preview-blue-soft);
    --crm-theme-swatch-deep: var(--crm-preview-blue-deep);
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 7.4rem;
    align-content: space-between;
    gap: 0.8rem;
    padding: 0.82rem;
    border: 1px solid var(--crm-control-border);
    border-radius: var(--crm-subpanel-radius);
    color: var(--crm-color-ink);
    background: var(--crm-control-bg);
    box-shadow: var(--crm-control-shadow);
    cursor: pointer;
    transition: border-color var(--crm-motion-standard) var(--crm-ease), background var(--crm-motion-standard) var(--crm-ease), box-shadow var(--crm-motion-standard) var(--crm-ease), transform var(--crm-motion-press) var(--crm-ease);
}

  body.crm-app-page .crm-theme-option:hover {
    border-color: var(--crm-color-border-hot);
    box-shadow: var(--crm-shadow-interactive);
}

  body.crm-app-page .crm-theme-option:active {
    transform: scale(0.985);
}

  body.crm-app-page .crm-theme-option:has(input:checked) {
    border-color: var(--crm-color-focus);
    box-shadow: var(--crm-shadow-interactive);
}

  body.crm-app-page .crm-theme-option:has(input:focus-visible) {
    outline: 3px solid var(--crm-control-focus-ring);
    outline-offset: 2px;
}

  body.crm-app-page .crm-theme-option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

  body.crm-app-page .crm-theme-option > span:last-child {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

  body.crm-app-page .crm-theme-option strong {
    font-size: var(--crm-type-body);
    font-weight: 650;
    line-height: 1.25;
}

  body.crm-app-page .crm-theme-option small {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    line-height: 1.35;
}

  body.crm-app-page .crm-theme-option__preview {
    display: grid;
    grid-template-columns: 1.7fr 1fr 0.72fr;
    align-items: end;
    gap: 0.3rem;
    height: 2.4rem;
}

  body.crm-app-page .crm-theme-option__preview i {
    display: block;
    min-width: 0;
    height: 100%;
    border-radius: 0.52rem;
    background: var(--crm-theme-swatch);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight);
}

  body.crm-app-page .crm-theme-option__preview i:nth-child(2) { height: 74%; background: var(--crm-theme-swatch-deep); }
  body.crm-app-page .crm-theme-option__preview i:nth-child(3) { height: 54%; background: var(--crm-theme-swatch-soft); }
  body.crm-app-page .crm-theme-option--red { --crm-theme-swatch: var(--crm-preview-red); --crm-theme-swatch-soft: var(--crm-preview-red-soft); --crm-theme-swatch-deep: var(--crm-preview-red-deep); }
  body.crm-app-page .crm-theme-option--green { --crm-theme-swatch: var(--crm-preview-green); --crm-theme-swatch-soft: var(--crm-preview-green-soft); --crm-theme-swatch-deep: var(--crm-preview-green-deep); }
  body.crm-app-page .crm-theme-option--orange { --crm-theme-swatch: var(--crm-preview-orange); --crm-theme-swatch-soft: var(--crm-preview-orange-soft); --crm-theme-swatch-deep: var(--crm-preview-orange-deep); }
  body.crm-app-page .crm-theme-option--purple { --crm-theme-swatch: var(--crm-preview-purple); --crm-theme-swatch-soft: var(--crm-preview-purple-soft); --crm-theme-swatch-deep: var(--crm-preview-purple-deep); }
  body.crm-app-page .crm-theme-option--graphite { --crm-theme-swatch: var(--crm-preview-graphite); --crm-theme-swatch-soft: var(--crm-preview-graphite-soft); --crm-theme-swatch-deep: var(--crm-preview-graphite-deep); }

  body.crm-settings-page .crm-employee-fields > label,
body.crm-settings-page .crm-settings-owner .crm-form-grid > label {
    grid-template-rows: 1.1rem var(--crm-control-height) 1rem;
}

  body.crm-settings-page .crm-employee-fields > label > :is(input, select),
body.crm-settings-page .crm-settings-owner .crm-form-grid > label > :is(input, select) {
    height: var(--crm-control-height);
    min-height: var(--crm-control-height);
}

  body.crm-app-page .crm-settings-reports[hidden] { display: none; }
  body.crm-app-page .crm-settings-reports { display: grid; min-width: 0; }
  body.crm-app-page .crm-report-directory { display: grid; min-width: 0; gap: var(--crm-component-gap); padding: var(--crm-component-inset); }
  body.crm-app-page .crm-report-directory__header > div > p:last-child { max-width: 72ch; margin: 0.35rem 0 0; color: var(--crm-color-ink-muted); font-size: var(--crm-type-label); line-height: 1.5; }
  body.crm-app-page .crm-report-filters { display: grid; grid-template-columns: 1.05fr repeat(4, minmax(8rem, 0.9fr)) auto; align-items: end; gap: 0.65rem; padding: 0.85rem; border: 1px solid var(--crm-rule); border-radius: var(--crm-panel-radius); border-color: var(--crm-component-rule); color: var(--crm-color-ink); background: var(--crm-subpanel-bg); }
  body.crm-app-page .crm-report-filters label { display: grid; min-width: 0; gap: 0.3rem; }
  body.crm-app-page .crm-report-filters label > span { color: var(--crm-color-ink-soft); font-size: var(--crm-type-caption); font-weight: 600; }
  body.crm-app-page .crm-report-filters .crm-button { min-width: 8.5rem; }
  body.crm-app-page .crm-report-summary { display: flex; min-height: 1.5rem; align-items: center; color: var(--crm-color-ink-muted); font-size: var(--crm-type-label); }
  body.crm-app-page .crm-report-table { width: 100%; min-width: 76rem; border-collapse: collapse; table-layout: auto; font-size: var(--crm-type-label); }
  body.crm-app-page .crm-report-table th { padding: 0.65rem 0.55rem;  font-size: var(--crm-type-caption); font-weight: 650; text-align: start; color: var(--crm-color-ink-muted); background: var(--crm-operations-dense-bg); border-color: var(--crm-component-rule); }
  body.crm-app-page .crm-report-table td { padding: 0.75rem 0.55rem; border-block-start: 1px solid var(--crm-rule); color: var(--crm-color-ink-soft); vertical-align: middle; border-color: var(--crm-component-rule); }
  body.crm-app-page .crm-report-table td:first-child { color: var(--crm-color-ink); font-weight: 620; }
  body.crm-app-page .crm-report-table :is(th, td):nth-child(n + 3):not(:last-child) { text-align: end; font-variant-numeric: tabular-nums; }
  body.crm-app-page .crm-report-table th { min-width: 5rem; color: var(--crm-color-ink-muted); background: var(--crm-operations-dense-bg); border-color: var(--crm-component-rule); }

body.crm-app-page .crm-report-table td { min-width: 5rem; border-color: var(--crm-component-rule); }
  body.crm-app-page .crm-report-table :is(th, td):first-child { min-width: 14rem; }
  body.crm-app-page .crm-report-table :is(th, td):nth-child(2) { min-width: 10rem; white-space: nowrap; }
  body.crm-app-page .crm-report-table td:nth-child(n + 3) { white-space: nowrap; }
  body.crm-app-page .crm-report-table th:nth-child(n + 6):nth-child(-n + 9) { min-width: 8.5rem; }

  body.crm-dashboard-page .crm-reconciliation__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

  body.crm-app-page #crm-free-posts { min-width: 7.25rem; min-height: 2.5rem; padding-inline: 0.85rem; white-space: nowrap; font-size: var(--crm-type-label); }
  body.crm-app-page .crm-process-stage { min-height: 5.7rem; padding-inline: 0.55rem; }
  body.crm-app-page .crm-process-stage > strong { font-size: 1.5rem; }
  body.crm-app-page .crm-process-stage > small { font-size: var(--crm-type-caption); line-height: 1.25; }

  body.crm-app-page .crm-finance-period { width: auto; }
  body.crm-app-page .crm-finance-period__presets { white-space: normal; border-color: var(--crm-component-rule); color: var(--crm-color-ink); background: var(--crm-color-surface); }
  body.crm-app-page .crm-finance > [data-finance-panel="overview"] { display: grid; min-width: 0; gap: var(--crm-gap); }
  body.crm-app-page .crm-finance > [data-finance-panel="overview"][hidden] { display: none; }
  body.crm-app-page .crm-finance__period-label { font-size: var(--crm-type-caption); }
  body.crm-app-page .crm-finance-period :is(button, input) { font-size: var(--crm-type-label); }

  body.crm-app-page :is(.crm-table, .crm-data-table, .crm-catalog-table, .crm-services-table, .crm-employee-table) {
    font-size: var(--crm-type-label);
}

  body.crm-app-page :is(.crm-table, .crm-data-table, .crm-catalog-table, .crm-services-table, .crm-employee-table) th {
    font-size: var(--crm-type-caption);
    line-height: 1.25;
    color: var(--crm-color-ink-muted);
    background: var(--crm-operations-dense-bg);
    border-color: var(--crm-component-rule);
}

  body.crm-app-page .crm-table-state {
    min-height: 6rem;
    padding: 1rem;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.45;
    text-align: center;
}
}

@media screen {
  body.crm-app-page .crm-settings-access[hidden] { display: none; }

  body.crm-app-page .crm-settings-access {
    display: grid;
    min-width: 0;
}

  body.crm-app-page .crm-access-directory {
    display: grid;
    min-width: 0;
    gap: var(--crm-component-gap);
    padding: var(--crm-component-inset);
}

  body.crm-app-page .crm-access-directory__header { align-items: flex-start; }

  body.crm-app-page .crm-access-directory__header > div > p:last-child {
    max-width: 74ch;
    margin: 0.35rem 0 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.5;
}

  body.crm-app-page .crm-access-notice {
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border-radius: var(--crm-subpanel-radius);

    box-shadow: inset 0 0 0 1px var(--crm-color-border-cool);
    border-color: var(--crm-color-border-cool);
    color: var(--crm-color-ink);
    background: var(--crm-surface-accent-bg);
}

  body.crm-app-page .crm-access-notice strong { font-size: var(--crm-type-control); }
  body.crm-app-page .crm-access-notice p { margin: 0; color: var(--crm-color-ink-soft); font-size: var(--crm-type-label); line-height: 1.45; }

  body.crm-app-page .crm-access-role-summary {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 0.55rem;
}

  .crm-access-role-item { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; align-content: start; gap: var(--crm-space-2); }
  .crm-access-role-item > small { color: var(--crm-color-ink-soft); padding: var(--crm-space-2); }
  .crm-access-role-item > button { width: 100%; white-space: normal; overflow-wrap: anywhere; }

  body.crm-app-page .crm-access-role-card {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.75rem 0.8rem;
    border: 0;
    border-radius: var(--crm-control-radius);
    background: var(--crm-subpanel-bg);
    box-shadow: inset 0 0 0 1px var(--crm-rule);
    color: var(--crm-color-ink);
    font: inherit;
    text-align: start;
}

  body.crm-app-page button.crm-access-role-card { cursor: pointer; }
  body.crm-app-page button.crm-access-role-card:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: 2px; }

  body.crm-app-page .crm-access-role-card > span { display: grid; min-width: 0; flex: 1 1 7.5rem; gap: 0.12rem; }
  body.crm-app-page .crm-access-role-card strong { font-size: var(--crm-type-label); font-weight: 650; }
  body.crm-app-page .crm-access-role-card small { color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); line-height: 1.3; }

  body.crm-app-page .crm-access-matrix-scroll {
    min-width: 0;
    overflow: clip;
    border-radius: var(--crm-panel-radius);

    box-shadow: inset 0 0 0 1px var(--crm-rule);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-surface-inset-bg);
}

  body.crm-app-page .crm-access-matrix {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

  body.crm-app-page .crm-access-matrix th { border-block-end: 1px solid var(--crm-rule); color: var(--crm-color-ink-soft); background: var(--crm-surface-quiet-bg); }

body.crm-app-page .crm-access-matrix td { border-block-end: 1px solid var(--crm-rule); }
  body.crm-app-page .crm-access-matrix tr:last-child :is(th, td) { border-block-end: 0; }

  body.crm-app-page .crm-access-matrix thead th {
    padding: 0.8rem 0.45rem;


    font-size: var(--crm-type-caption);
    font-weight: 650;
    text-align: center;
    vertical-align: bottom;
    color: var(--crm-color-ink-soft);
    background: var(--crm-surface-quiet-bg);
}

  body.crm-app-page .crm-access-matrix thead th:first-child {
    width: 38%;
    padding-inline: 1rem;
    text-align: start;
}

  body.crm-app-page .crm-access-matrix thead th strong,
body.crm-app-page .crm-access-matrix thead th small { display: block; }
  body.crm-app-page .crm-access-matrix thead th small { margin-top: 0.2rem; color: var(--crm-color-ink-muted); font-weight: 450; line-height: 1.25; }

  body.crm-app-page .crm-access-matrix tbody > tr:not(.crm-access-matrix__group) > th {
    padding: 0.72rem 1rem;
    text-align: start;
}

  body.crm-app-page .crm-access-matrix tbody > tr:not(.crm-access-matrix__group) > th strong,
body.crm-app-page .crm-access-matrix tbody > tr:not(.crm-access-matrix__group) > th small { display: block; }
  body.crm-app-page .crm-access-matrix tbody > tr:not(.crm-access-matrix__group) > th strong { font-size: var(--crm-type-label); font-weight: 620; }
  body.crm-app-page .crm-access-matrix tbody > tr:not(.crm-access-matrix__group) > th small { margin-top: 0.16rem; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); font-weight: 450; line-height: 1.35; }

  body.crm-app-page .crm-access-matrix tbody td { padding: 0.35rem; text-align: center; }

  body.crm-app-page .crm-access-matrix__group th {
    padding: 1rem 1rem 0.7rem;

    text-align: start;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-surface-inset-bg);
}

  body.crm-app-page .crm-access-matrix__group strong,
body.crm-app-page .crm-access-matrix__group small { display: block; }
  body.crm-app-page .crm-access-matrix__group strong { color: var(--crm-color-link); font-size: var(--crm-type-control); font-weight: 650; }
  body.crm-app-page .crm-access-matrix__group small { max-width: 76ch; margin-top: 0.18rem; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); font-weight: 450; line-height: 1.35; }

  body.crm-app-page .crm-access-check {
    position: relative;
    display: inline-grid;
    width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    border-radius: 0.75rem;
    cursor: pointer;
}

  body.crm-app-page .crm-access-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

  body.crm-app-page .crm-access-check span {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border: 1px solid var(--crm-color-border-strong);
    border-radius: 0.38rem;
    background: var(--crm-control-bg);
    transition-property: background-color, border-color, box-shadow, transform;
    transition-duration: var(--crm-motion-fast);
    transition-timing-function: var(--crm-ease);
}

  body.crm-app-page .crm-access-check input:checked + span {
    border-color: var(--crm-color-accent);
    background: var(--crm-color-accent);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight);
}

  body.crm-app-page .crm-access-check input:checked + span::after {
    content: "";
    width: 0.52rem;
    height: 0.28rem;
    border: solid var(--crm-color-border-strong);
    border-width: 0 0 2px 2px;
    transform: translateY(-0.08rem) rotate(-45deg);
}

  body.crm-app-page .crm-access-check input:focus-visible + span { outline: 2px solid var(--crm-color-focus); outline-offset: 3px; }
  body.crm-app-page .crm-access-check input:disabled + span { opacity: 0.72; }
  body.crm-app-page .crm-access-check:has(input:not(:disabled)):active span { transform: scale(0.96); }

  body.crm-app-page .crm-access-footer {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

  body.crm-app-page .crm-access-footer :is(.crm-form-error, .crm-access-feedback) { margin: 0; }
  body.crm-app-page .crm-access-feedback { color: var(--crm-color-ink-muted); font-size: var(--crm-type-label); }
  body.crm-app-page .crm-access-footer .crm-button { margin-inline-start: auto; }

  body.crm-platform-page .crm-platform-privacy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
    padding: var(--crm-component-inset);
}

  body.crm-platform-page .crm-main {
    display: grid;
    align-content: start;
    gap: var(--crm-component-gap);
}

  body.crm-platform-page .crm-main > * { margin-block: 0; }
  body.crm-platform-page .crm-operations-head { min-height: 6.4rem; padding-block: 0.75rem 0.35rem; }
  body.crm-platform-page .crm-operations-head h1 { font-size: clamp(1.9rem, 2.15vw, 2.4rem); }
  body.crm-platform-page .crm-operations-head > div:first-child > p:last-child { max-width: 62rem; }

  body.crm-platform-page .crm-platform-jump-nav {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.38rem;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-card-radius);
    background: var(--crm-subpanel-bg);
  }

  body.crm-platform-page .crm-platform-jump-nav a {
    display: grid;
    min-width: 0;
    min-height: var(--crm-control-height);
    place-items: center;
    padding: 0.55rem 0.7rem;
    border-radius: var(--crm-control-radius);
    color: var(--crm-color-ink-soft);
    font-size: var(--crm-type-label);
    font-weight: 620;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
  }

  body.crm-platform-page .crm-platform-jump-nav a:hover { color: var(--crm-color-link); background: var(--crm-color-accent-soft); }
  body.crm-platform-page .crm-platform-jump-nav a:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: -2px; }
  body.crm-platform-page :is(#crm-platform-pilot, #crm-platform-footprint, #crm-platform-technical, #crm-platform-release-details) { scroll-margin-top: 1rem; }

  body.crm-platform-page .crm-platform-privacy__mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 1rem;
    color: var(--crm-color-accent-deep);
    background: var(--crm-surface-accent-bg);
    font-size: 1.25rem;
    font-weight: 700;
}

  body.crm-platform-page .crm-platform-privacy h2 { margin: 0.16rem 0 0; font-size: var(--crm-type-section); }
  body.crm-platform-page .crm-platform-privacy p:last-child { max-width: 78ch; margin: 0.3rem 0 0; color: var(--crm-color-ink-muted); font-size: var(--crm-type-label); line-height: 1.5; }

  body.crm-platform-page .crm-platform-metrics {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--crm-component-gap);
}

  body.crm-platform-page .crm-platform-metrics > article {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
    padding: var(--crm-component-inset);
}

  body.crm-platform-page .crm-platform-metrics small,
body.crm-platform-page .crm-platform-panel small { color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); }
  body.crm-platform-page .crm-platform-metrics strong { font-size: clamp(1.65rem, 2.2vw, 2.45rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; }
  body.crm-platform-page .crm-platform-metrics p { margin: 0; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); }

  body.crm-platform-page .crm-platform-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--crm-component-gap);
}

  body.crm-platform-page .crm-platform-panel { display: grid; min-width: 0; align-content: start; gap: 1rem; padding: var(--crm-component-inset); }
  body.crm-platform-page .crm-platform-panel > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  body.crm-platform-page .crm-platform-panel h2 { margin: 0.16rem 0 0; font-size: var(--crm-type-section); }
  body.crm-platform-page .crm-platform-panel > header > span { color: var(--crm-color-link); font-size: var(--crm-type-caption); font-weight: 620; text-align: end; }
  body.crm-platform-page .crm-platform-panel > p { margin: 0; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); line-height: 1.45; }

  body.crm-platform-page .crm-platform-panel__stats,
body.crm-platform-page .crm-platform-health { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--crm-rule); }
  body.crm-platform-page .crm-platform-panel__stats--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.crm-platform-page .crm-platform-health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.crm-platform-page .crm-platform-panel__stats > span,
body.crm-platform-page .crm-platform-health > span { display: grid; min-width: 0; gap: 0.25rem; padding: 0.85rem; }
  body.crm-platform-page .crm-platform-panel__stats > span + span,
body.crm-platform-page .crm-platform-health > span + span { border-inline-start: 1px solid var(--crm-rule); }
  body.crm-platform-page .crm-platform-panel__stats strong,
body.crm-platform-page .crm-platform-health strong { overflow-wrap: anywhere; font-size: var(--crm-type-control); font-weight: 650; font-variant-numeric: tabular-nums; }

  body.crm-platform-page .crm-platform-footprint { scroll-margin-top: 1rem; }
  body.crm-platform-page .crm-platform-direction-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
  }

  body.crm-platform-page .crm-platform-direction-grid > span {
    display: grid;
    min-width: 0;
    gap: 0.28rem;
    padding: 0.85rem;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-subpanel-radius);
    background: var(--crm-subpanel-bg);
  }

  body.crm-platform-page .crm-platform-direction-grid strong {
    font-size: clamp(1.35rem, 1.8vw, 1.8rem);
    font-variant-numeric: tabular-nums;
  }

  body.crm-platform-page .crm-platform-section {
    display: grid;
    min-width: 0;
    gap: var(--crm-component-gap);
    padding-block: 0.4rem;
}

  body.crm-platform-page .crm-platform-section > .crm-section-heading h2,
body.crm-platform-page .crm-platform-errors h2,
body.crm-platform-page .crm-platform-status h2,
body.crm-platform-page .crm-platform-attention h2 {
    margin: 0.15rem 0 0;
    font-size: var(--crm-type-section);
    font-weight: 630;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

  body.crm-platform-page .crm-platform-section > .crm-section-heading > div > p:last-child,
body.crm-platform-page .crm-platform-errors .crm-section-heading > div > p:last-child {
    max-width: 76ch;
    margin: 0.35rem 0 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
}

  body.crm-platform-page .crm-platform-status {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: var(--crm-component-inset);
}

  body.crm-platform-page .crm-platform-status__main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.9rem;
}

  body.crm-platform-page .crm-platform-status__main p:last-child {
    margin: 0.32rem 0 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
}

  body.crm-platform-page .crm-platform-status__indicator {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--crm-color-ink-muted);
    box-shadow: 0 0 0 0.32rem color-mix(in srgb, var(--crm-color-ink-muted) 15%, transparent);
}

  body.crm-platform-page .crm-platform-status__indicator[data-status="ok"] {
    background: var(--crm-color-success);
    box-shadow: 0 0 0 0.32rem var(--crm-color-success-soft);
}

  body.crm-platform-page .crm-platform-status__indicator[data-status="partial"] {
    background: var(--crm-color-warning);
    box-shadow: 0 0 0 0.32rem var(--crm-color-warning-soft);
}

  body.crm-platform-page .crm-platform-status__indicator:is([data-status="attention"], [data-status="unavailable"]) {
    background: var(--crm-color-danger);
    box-shadow: 0 0 0 0.32rem var(--crm-color-danger-soft);
}

  body.crm-platform-page .crm-platform-status__meta {
    display: grid;
    min-width: min(31rem, 38vw);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-inline-start: 1px solid var(--crm-rule);
}

  body.crm-platform-page .crm-platform-status__meta > div {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
    padding-inline: 0.9rem;
}

  body.crm-platform-page .crm-platform-status__meta dt,
body.crm-platform-page .crm-platform-facts dt {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
}

  body.crm-platform-page .crm-platform-status__meta dd,
body.crm-platform-page .crm-platform-facts dd {
    min-width: 0;
    margin: 0;
    color: var(--crm-color-ink);
    font-size: var(--crm-type-label);
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

  body.crm-platform-page .crm-platform-attention,
body.crm-platform-page .crm-platform-errors {
    display: grid;
    min-width: 0;
    gap: 1rem;
    padding: var(--crm-component-inset);
}

  body.crm-platform-page .crm-platform-attention[hidden] { display: none; }
  body.crm-platform-page .crm-platform-attention ol { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
  body.crm-platform-page .crm-platform-attention li { display: grid; gap: 0.28rem; padding: 0.8rem; border-inline-start: 0.24rem solid var(--crm-color-warning); border-radius: var(--crm-control-radius); background: var(--crm-color-warning-soft); }
  body.crm-platform-page .crm-platform-attention li[data-severity="critical"],
body.crm-platform-page .crm-platform-attention li[data-severity="error"] { border-inline-start-color: var(--crm-color-danger); background: var(--crm-color-danger-soft); }
  body.crm-platform-page .crm-platform-attention li > div { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 1rem; }
  body.crm-platform-page .crm-platform-attention li p { margin: 0; color: var(--crm-color-ink-soft); font-size: var(--crm-type-label); }
  body.crm-platform-page .crm-platform-attention li small { color: var(--crm-color-ink-muted); overflow-wrap: anywhere; }

  body.crm-platform-page .crm-platform-source-state {
    flex: 0 0 auto;
    color: var(--crm-color-link);
    font-size: var(--crm-type-caption);
    font-weight: 620;
    text-align: end;
}

  body.crm-platform-page .crm-platform-grid--product { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  body.crm-platform-page .crm-platform-panel h3 { margin: 0.16rem 0 0; font-size: var(--crm-type-section); }

  body.crm-platform-page .crm-platform-facts {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-block: 1px solid var(--crm-rule);
}

  body.crm-platform-page .crm-platform-facts > div {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
    padding: 0.68rem 0.75rem;
    border-block-end: 1px solid var(--crm-rule);
}

  body.crm-platform-page .crm-platform-facts > div:nth-child(odd) { border-inline-end: 1px solid var(--crm-rule); }
  body.crm-platform-page .crm-platform-facts > div:nth-last-child(-n + 2) { border-block-end: 0; }

  body.crm-platform-page [data-status="unavailable"],
body.crm-platform-page [data-status="down"],
body.crm-platform-page [data-status="current"] { color: var(--crm-color-danger); }
  body.crm-platform-page [data-status="stale"],
body.crm-platform-page [data-status="partial"],
body.crm-platform-page [data-status="insufficient_data"] { color: var(--crm-color-warning); }
  body.crm-platform-page [data-status="ok"],
body.crm-platform-page [data-status="available"],
body.crm-platform-page [data-status="resolved"] { color: var(--crm-color-success); }
  body.crm-platform-page [data-status="not_connected"],
body.crm-platform-page [data-status="disabled"] { color: var(--crm-color-ink-muted); }

  body.crm-platform-page .crm-platform-trend { display: grid; min-height: 9rem; align-content: end; gap: 0.6rem; }
  body.crm-platform-page .crm-platform-trend ol { display: grid; height: 6.5rem; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 0.18rem; margin: 0; padding: 0; list-style: none; }
  body.crm-platform-page .crm-platform-trend li { display: flex; height: 100%; align-items: end; }
  body.crm-platform-page .crm-platform-trend li span { display: block; width: 100%; height: var(--crm-platform-bar); min-height: 0.2rem; border-radius: 0.25rem 0.25rem 0.08rem 0.08rem; background: var(--crm-color-accent); }
  body.crm-platform-page .crm-platform-trend li span[data-status="gap"] { background: repeating-linear-gradient(135deg, var(--crm-rule) 0 2px, transparent 2px 4px); }
  body.crm-platform-page .crm-platform-trend p { margin: 0; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); }

  body.crm-platform-page .crm-platform-disclosure { min-width: 0; padding: 0; overflow: clip; }
  body.crm-platform-page .crm-platform-disclosure > summary { min-height: var(--crm-control-height); padding: 0.9rem var(--crm-component-inset); cursor: pointer; color: var(--crm-color-link); font-size: var(--crm-type-control); font-weight: 630; }
  body.crm-platform-page .crm-platform-disclosure > summary:focus-visible,
body.crm-platform-page .crm-platform-metric > summary:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: -2px; }
  body.crm-platform-page .crm-platform-release > p { margin: 0; padding: 0 var(--crm-component-inset) var(--crm-space-4); color: var(--crm-color-ink-muted); }
  body.crm-platform-page .crm-platform-release-notes { display: grid; gap: var(--crm-space-4); margin: 0; padding: 0 var(--crm-component-inset) var(--crm-component-inset) calc(var(--crm-component-inset) + 1.4rem); }
  body.crm-platform-page .crm-platform-release-notes li { padding-inline-start: var(--crm-space-2); }
  body.crm-platform-page .crm-platform-release-notes :is(strong, p) { display: block; }
  body.crm-platform-page .crm-platform-release-notes p { margin: var(--crm-space-1) 0 0; color: var(--crm-color-ink-muted); }

  body.crm-platform-page .crm-platform-metric-groups { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--crm-component-gap); padding: 0 var(--crm-component-inset) var(--crm-component-inset); }
  body.crm-platform-page .crm-platform-metric-groups > section { min-width: 0; }
  body.crm-platform-page .crm-platform-metric-groups h3 { margin: 0 0 0.55rem; font-size: var(--crm-type-control); }
  body.crm-platform-page .crm-platform-metric-list { display: grid; min-width: 0; border-block-start: 1px solid var(--crm-rule); }
  body.crm-platform-page .crm-platform-metric { min-width: 0; border-block-end: 1px solid var(--crm-rule); }
  body.crm-platform-page .crm-platform-metric > summary { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(5rem, auto) minmax(7.8rem, auto); align-items: center; gap: 0.65rem; padding: 0.7rem 0.35rem; cursor: pointer; list-style-position: outside; }
  body.crm-platform-page .crm-platform-metric > summary strong { overflow-wrap: anywhere; font-size: var(--crm-type-label); font-variant-numeric: tabular-nums; text-align: end; }
  body.crm-platform-page .crm-platform-metric > summary em { font-size: var(--crm-type-caption); font-style: normal; font-weight: 620; text-align: end; }
  body.crm-platform-page .crm-platform-metric > dl { display: grid; gap: 0; margin: 0 0 0.7rem; padding: 0.65rem; border-radius: var(--crm-subpanel-radius); background: var(--crm-subpanel-bg); }
  body.crm-platform-page .crm-platform-metric > dl > div { display: grid; min-width: 0; grid-template-columns: minmax(8.5rem, 0.32fr) minmax(0, 1fr); gap: 0.75rem; padding-block: 0.35rem; }
  body.crm-platform-page .crm-platform-metric dt { color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); }
  body.crm-platform-page .crm-platform-metric dd,
body.crm-platform-page .crm-platform-metric code { margin: 0; overflow-wrap: anywhere; color: var(--crm-color-ink-soft); font-size: var(--crm-type-caption); }

  body.crm-platform-page .crm-platform-error-filters { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(10rem, 1fr)) auto; align-items: end; gap: 0.75rem; }
  body.crm-platform-page .crm-platform-error-filters label { display: grid; gap: 0.32rem; }
  body.crm-platform-page .crm-platform-source-warning,
body.crm-platform-page .crm-platform-state { margin: 0; padding: 0.7rem; border-radius: var(--crm-control-radius); color: var(--crm-color-ink-soft); background: var(--crm-color-warning-soft); font-size: var(--crm-type-label); }
  body.crm-platform-page .crm-platform-state { background: var(--crm-subpanel-bg); }
  body.crm-platform-page .crm-platform-error-table-wrap { overflow-x: auto; }
  body.crm-platform-page .crm-platform-error-table-wrap table { width: 100%; min-width: 62rem; border-collapse: collapse; }
  body.crm-platform-page .crm-platform-error-table-wrap th { padding: 0.72rem; border-block-end: 1px solid var(--crm-rule); text-align: start; vertical-align: top; color: var(--crm-color-ink-muted); background: var(--crm-operations-dense-bg); border-color: var(--crm-component-rule); }

body.crm-platform-page .crm-platform-error-table-wrap td { padding: 0.72rem; border-block-end: 1px solid var(--crm-rule); text-align: start; vertical-align: top; border-color: var(--crm-component-rule); }
  body.crm-platform-page .crm-platform-error-table-wrap th {  font-size: var(--crm-type-caption); font-weight: 620; color: var(--crm-color-ink-muted); background: var(--crm-operations-dense-bg); border-color: var(--crm-component-rule); }
  body.crm-platform-page .crm-platform-error-table-wrap td { font-size: var(--crm-type-label); border-color: var(--crm-component-rule); }
  body.crm-platform-page .crm-platform-error-table-wrap td > * { display: block; margin: 0; }
  body.crm-platform-page .crm-platform-error-table-wrap td small,
body.crm-platform-page .crm-platform-error-table-wrap td code { margin-top: 0.22rem; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); overflow-wrap: anywhere; }
  body.crm-platform-page .crm-platform-pagination { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
  body.crm-platform-page .crm-platform-pagination[hidden] { display: none; }
  body.crm-platform-page .crm-platform-pagination span { min-width: 6rem; text-align: center; font-size: var(--crm-type-label); }
  body.crm-platform-page .crm-platform-future { opacity: 0.92; }

  @media screen and (max-width: 1450px) {
    body.crm-platform-page .crm-platform-status { grid-template-columns: minmax(0, 1fr); }
    body.crm-platform-page .crm-platform-status__meta { width: 100%; min-width: 0; padding-block-start: 0.75rem; border-block-start: 1px solid var(--crm-rule); border-inline-start: 0; }
    body.crm-platform-page .crm-platform-metric-groups { grid-template-columns: minmax(0, 1fr); }
    body.crm-platform-page .crm-platform-panel__stats--four,
    body.crm-platform-page .crm-platform-direction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.crm-platform-page .crm-platform-panel__stats--four > span:nth-child(3) { border-inline-start: 0; }
    body.crm-platform-page .crm-platform-panel__stats--four > span:nth-child(n + 3) { border-block-start: 1px solid var(--crm-rule); }
  }

  body.crm-app-page .crm-settings-structure[hidden] { display: none; }
  body.crm-app-page .crm-settings-structure { display: grid; min-width: 0; gap: var(--crm-component-gap); }

  body.crm-app-page .crm-settings-structure__intro {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--crm-component-inset);
}

  body.crm-app-page .crm-settings-structure__intro h2 { margin: 0.15rem 0 0; font-size: var(--crm-type-section); }
  body.crm-app-page .crm-settings-structure__intro p:last-child { max-width: 72ch; margin: 0.35rem 0 0; color: var(--crm-color-ink-muted); font-size: var(--crm-type-label); line-height: 1.5; }
  body.crm-app-page .crm-settings-structure__intro-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  @media (max-width: 48rem) {
    body.crm-app-page .crm-settings-structure__intro { display: grid; grid-template-columns: minmax(0, 1fr); }
    body.crm-app-page .crm-settings-structure__intro-actions { min-width: 0; }
  }

  body.crm-app-page .crm-settings-structure__grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--crm-component-gap);
}

  body.crm-app-page .crm-structure-directory { display: grid; min-width: 0; align-content: start; gap: 1rem; padding: var(--crm-component-inset); }
  body.crm-app-page .crm-structure-directory .crm-form-section__header { align-items: flex-start; }
  body.crm-app-page .crm-structure-list { display: grid; min-width: 0; gap: 0.55rem; }

  body.crm-app-page .crm-structure-card {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem;
    border: 1px solid var(--crm-rule);
    border-radius: var(--crm-subpanel-radius);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page .crm-structure-card__copy { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 0.2rem; overflow-wrap: anywhere; }
  body.crm-app-page .crm-structure-card__copy strong { font-size: var(--crm-type-control); font-weight: 650; }
  body.crm-app-page .crm-structure-card__copy small { overflow: hidden; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
  body.crm-app-page .crm-structure-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }
  body.crm-app-page .crm-structure-card__meta span { color: var(--crm-color-ink-soft); font-size: var(--crm-type-caption); }
  body.crm-app-page .crm-structure-card__meta span + span::before { content: "·"; margin-inline-end: 0.35rem; color: var(--crm-color-ink-muted); }

  body.crm-app-page .crm-structure-dialog .crm-date-dialog__form { width: min(54rem, calc(100vw - 3rem)); }
  body.crm-app-page .crm-structure-form { display: grid; gap: 1rem; }

  body.crm-app-page .crm-switch-row {
    display: flex;
    min-height: var(--crm-control-height);
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid var(--crm-rule);
    border-radius: var(--crm-control-radius);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page .crm-switch-row > input { flex: 0 0 auto; width: 1.15rem; min-height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--crm-color-accent); }
  body.crm-app-page .crm-switch-row > span { display: grid; gap: 0.16rem; }
  body.crm-app-page .crm-switch-row strong { font-size: var(--crm-type-label); }
  body.crm-app-page .crm-switch-row small { color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); line-height: 1.4; }
}

@media screen and (min-width: 1181px) and (max-width: 1510px) {
  body.crm-work-order-page .crm-payment-batch-row {
    grid-template-columns: minmax(9rem, 1.2fr) minmax(8rem, 0.8fr) minmax(8rem, 0.8fr) var(--crm-control-height);
}

  body.crm-work-order-page .crm-payment-batch-row > label:first-child { grid-column: auto; }
  body.crm-work-order-page .crm-payment-batch-row__payer { grid-column: 1 / -1; }
  body.crm-work-order-page .crm-payment-batch-row > [data-remove-payment] { justify-self: stretch; }
}

@media screen and (min-width: 1181px) and (max-width: 1399px) {
  body.crm-work-order-page .crm-order-items-head { display: none; }

  body.crm-work-order-page .crm-order-item {
    grid-template-columns: minmax(12rem, 1.65fr) minmax(4rem, 0.38fr) minmax(7rem, 0.7fr) minmax(7rem, 0.7fr) var(--crm-control-height);
}

  body.crm-work-order-page .crm-order-item > output {
    grid-column: span 2;
    min-height: 2rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.65rem;
    background: var(--crm-surface-inset-bg);
    text-align: start;
}
}

@media screen and (min-width: 1181px) and (max-width: 1280px) {
  body.crm-app-page .crm-section-tabs button { padding-inline: 0.55rem; font-size: var(--crm-type-label); }
  body.crm-app-page .crm-finance-period { width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  body.crm-app-page .crm-settings-history__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.crm-app-page .crm-settings-history__grid { grid-template-columns: 1fr; }
  body.crm-work-order-page .crm-order-checklists__grid { grid-template-columns: 1fr; }
}

@media screen and (min-width: 1181px) and (prefers-reduced-motion: reduce) {
  body.crm-app-page :is(.crm-button, .crm-icon-action, .crm-section-tabs button):active { transform: none; }
}

@media screen and (min-width: 1181px) and (prefers-reduced-transparency: reduce) {
  body.crm-app-page dialog.crm-date-dialog {

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-color-glass-dense);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-elevated);
}

body.crm-app-page .crm-form-section {

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

body.crm-app-page .crm-finance-panel {

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

body.crm-app-page .crm-finance-obligations {
    background: var(--crm-color-surface-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
}
/* Shared component roles and interaction states. */
@media screen {
body.crm-app-page .crm-topbar__user:not(.crm-account-trigger) {
    border-color: var(--crm-component-rule);
    background: var(--crm-surface-inset-bg);
  }

body.crm-app-page .crm-account-profile-appearance {
    display: grid;
    gap: var(--crm-gap);
    padding: 0.9rem;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-subpanel-radius);
    background: var(--crm-subpanel-bg);
  }

@media screen and (min-width: 1181px) {
body.crm-app-page .crm-account-trigger {
      width: auto;
      min-width: 0;
      min-height: max(var(--crm-control-height), 44px);
      max-width: min(15rem, 30vw);
      flex: 0 1 auto;
      padding: 0.32rem 0.65rem 0.32rem 0.34rem;
      border: 1px solid var(--crm-action-secondary-border);
      border-radius: 0.9rem;
      color: var(--crm-color-ink);
      background: var(--crm-action-secondary-bg);
      box-shadow: var(--crm-action-secondary-shadow);
    }
}

@media screen and (min-width: 1181px) {
body.crm-app-page .crm-account-trigger:is(:hover, [aria-expanded="true"]) {
      border-color: var(--crm-color-border-hot);
      background: color-mix(in srgb, var(--crm-color-accent) 9%, var(--crm-action-secondary-bg-hover));
      box-shadow: var(--crm-shadow-interactive);
    }
}

@media screen and (min-width: 1181px) {
body.crm-app-page .crm-account-trigger__copy {
      flex: 0 1 auto;
    }
}

body.crm-app-page dialog.crm-date-dialog.crm-dialog--solid {
  background: var(--crm-color-surface-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
}

.crm-account-trigger {
  max-width: min(19rem, 35vw);
  border-color: transparent;
  color: inherit;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.crm-account-trigger:hover { border-color: transparent; background: var(--crm-color-accent-soft); box-shadow: none; }
.crm-account-trigger:focus-visible { outline: 3px solid var(--crm-control-focus-ring); outline-offset: 2px; }
.crm-account-trigger[aria-expanded="true"] { border-color: transparent; background: var(--crm-color-accent-soft); box-shadow: none; }
.crm-account-trigger .crm-topbar__avatar { flex: 0 0 auto; background: var(--crm-brand-mark-bg); box-shadow: var(--crm-brand-mark-shadow); }
.crm-account-trigger__copy { display: grid; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.crm-account-trigger__copy :is(strong, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-account-trigger__chevron { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; color: var(--crm-color-ink-muted); transition: transform var(--crm-motion-fast) var(--crm-ease); }
.crm-account-trigger[aria-expanded="true"] .crm-account-trigger__chevron { transform: rotate(180deg); }

.crm-account-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0.65rem;
  z-index: var(--crm-z-popover);
  display: grid;
  width: min(21rem, calc(100vw - 2rem));
  overflow: hidden;
  padding: 0.45rem;
  border: 1px solid var(--crm-color-border-strong);
  border-radius: 1rem;
  color: var(--crm-color-ink);
  background: var(--crm-color-glass-dense);
  box-shadow: var(--crm-shadow-elevated), inset 0 1px 0 var(--crm-color-glass-highlight);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.crm-account-menu[hidden] { display: none; }
.crm-account-menu__identity { display: grid; min-width: 0; gap: 0.12rem; padding: 0.7rem 0.75rem 0.78rem; }
.crm-account-menu__identity :is(strong, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-account-menu__identity strong { font-size: var(--crm-type-label); font-weight: 650; }
.crm-account-menu__identity small { color: var(--crm-color-ink-muted); font-size: var(--crm-type-label); }
.crm-account-menu hr { width: calc(100% - 0.8rem); margin: 0.35rem 0.4rem; border: 0; border-top: 1px solid var(--crm-component-rule); }
.crm-account-menu__item {
  display: grid;
  min-height: 2.9rem;
  min-width: 0;
  align-content: center;
  gap: 0.12rem;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 0.72rem;
  color: var(--crm-color-ink);
  background: transparent;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.crm-account-menu__item:hover { background: color-mix(in srgb, var(--crm-color-accent) 7%, transparent); }
.crm-account-menu__item:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: -2px; }
.crm-account-menu__item strong { font-size: var(--crm-type-label); font-weight: 620; }
.crm-account-menu__item small { color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); line-height: 1.35; }
.crm-account-menu__logout strong { color: var(--crm-color-danger); }
.crm-account-menu__item:disabled { opacity: 0.65; cursor: wait; }

@media (prefers-reduced-motion: reduce) {
  .crm-account-trigger__chevron { transition: none; }
}

/* One logo viewport for navigation, account, editor and paper. These neutral
   plates preserve brand pixels across personal themes and printed output. */
body .crm-has-organization-logo[data-logo-background] {
  position: relative;
  overflow: hidden;
  padding: 4px;
  background: var(--crm-logo-plate-light);
}
body .crm-has-organization-logo[data-logo-background="dark"] { background: var(--crm-logo-plate-dark); }
body .crm-has-organization-logo[data-logo-background="none"] { background: transparent; box-shadow: none; border-color: transparent; }
.crm-logo-example-navigation small { display: block; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); font-weight: 400; }

/* Shared calendar: original ISO-valued input remains the form control. */
body.crm-app-page .crm-date-field { display: grid; align-content: start; gap: 0.45rem; min-width: 0; }
body.crm-app-page .crm-date-field > .crm-date-field__label { display: block; margin: 0; color: var(--crm-color-ink-muted); font: inherit; font-size: var(--crm-type-label); font-weight: 600; }
body.crm-app-page .crm-date-control { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; position: relative; min-width: var(--crm-date-min-inline-size, 0); width: 100%; }
body.crm-app-page .crm-date-control > input { --crm-input-padding-end: 44px; grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; padding-inline-end: var(--crm-input-padding-end); }
body.crm-app-page .crm-date-control[data-stacked="true"] { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 4px; }
body.crm-app-page .crm-date-control[data-stacked="true"] > input { --crm-input-padding-end: 8px; }
body.crm-app-page .crm-date-control[data-stacked="true"] > .crm-date-control__open { grid-column: 1; grid-row: 2; justify-self: end; width: 44px; height: 44px; }
.crm-date-control input::-webkit-calendar-picker-indicator { display: none; }
body.crm-app-page .crm-date-control__open { grid-column: 2; grid-row: 1; z-index: 1; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--crm-control-radius); background: transparent; color: var(--crm-color-ink-muted); cursor: pointer; }
body.crm-app-page .crm-date-control__open:hover { color: var(--crm-color-link); background: var(--crm-color-accent-soft); }
.crm-date-control__open:disabled { opacity: 0.5; cursor: default; }
/* Seven 44px day targets must fit even at 320px; shared mobile sheet insets
   and form padding are unsuitable for this compact calendar grid. */
body.crm-app-page dialog.crm-calendar-dialog { width: min(27rem, calc(100vw - 4px)); max-width: calc(100vw - 4px); margin: auto; padding: clamp(2px, calc((100vw - 320px) / 6), 1rem); color: var(--crm-color-ink); }
body.crm-app-page .crm-calendar-dialog > form { padding: 0; min-width: 0; gap: 0.7rem; }
.crm-calendar-navigation { display: grid; grid-template-columns: 44px minmax(0, 1fr) 5.5rem 44px; gap: 0.25rem; align-items: center; }
.crm-calendar-navigation label,
.crm-calendar-time label { display: grid; min-width: 0; gap: 0.25rem; }
body.crm-app-page .crm-calendar-navigation :is(input, select) { width: 100%; min-width: 0; padding-inline: 0.5rem; font: inherit; font-size: var(--crm-type-control); }
body.crm-app-page .crm-calendar-navigation select { padding-inline-end: 1.75rem; }
.crm-calendar-navigation .crm-icon-action { display: grid; place-items: center; line-height: 1; width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
.crm-calendar-weekdays,
.crm-calendar-days > [role="row"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.crm-calendar-weekdays { text-align: center; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); }
.crm-calendar-days [role="gridcell"] { min-width: 0; }
body.crm-app-page .crm-calendar-days button { display: block; width: 100%; min-width: 0; min-height: 44px; border: 1px solid transparent; border-radius: var(--crm-control-radius); padding: 0; font: inherit; font-variant-numeric: tabular-nums; color: var(--crm-color-ink); background: transparent; cursor: pointer; }
.crm-calendar-days button[data-outside="true"] { color: var(--crm-color-ink-muted); }
body.crm-app-page .crm-calendar-days [aria-selected="true"] > button { color: var(--crm-color-link); background: var(--crm-color-accent-soft); border-color: var(--crm-color-accent); font-weight: 700; }
body.crm-app-page .crm-calendar-days button:disabled { opacity: 0.4; cursor: default; }
body.crm-app-page .crm-calendar-days button:enabled:hover { background: var(--crm-color-accent-soft); }
body.crm-app-page .crm-calendar-dialog :is(button, input, select):focus-visible,
.crm-date-control__open:focus-visible { outline: 2px solid var(--crm-color-focus); outline-offset: -2px; }
.crm-calendar-time { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.crm-calendar-time[hidden] { display: none; }
.crm-calendar-dialog .crm-date-dialog__actions { flex-wrap: wrap; }
@media (min-width: 561px) {
  body.crm-app-page .crm-calendar-dialog .crm-date-dialog__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.crm-app-page .crm-calendar-dialog .crm-date-dialog__actions .crm-button { width: 100%; min-width: 0; padding-inline: 0.5rem; }
}
.crm-organization-logo { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; pointer-events: none; }
body .crm-print-logo.crm-has-organization-logo { width: clamp(20mm, calc(16mm * var(--crm-logo-aspect, 1)), 40mm); height: 16mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.crm-logo-dialog { width: min(44rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }
.crm-logo-dialog form { display: grid; gap: 1rem; min-width: 0; }
.crm-logo-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.crm-logo-editor-stage { display: grid; place-items: center; min-width: 0; width: 100%; height: 14rem; overflow: hidden; border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md); background: var(--crm-surface-inset-bg); touch-action: none; cursor: grab; }
.crm-logo-editor-stage:active { cursor: grabbing; }
.crm-logo-adjustments { display: grid; gap: 0.5rem; min-width: 0; }
.crm-logo-adjustments label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem; font-size: var(--crm-type-caption); color: var(--crm-color-ink); }
.crm-logo-adjustments input,
.crm-logo-adjustments select { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 44px; }
.crm-logo-adjustments input[type="range"] { padding: 0; accent-color: var(--crm-color-blue); }
.crm-logo-adjustments output { font-variant-numeric: tabular-nums; color: var(--crm-color-ink-muted); }
.crm-logo-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.crm-logo-examples figure { margin: 0; min-width: 0; }
.crm-logo-examples figcaption { margin-top: 0.4rem; color: var(--crm-color-ink-muted); font-size: var(--crm-type-caption); }
.crm-logo-example-header,
.crm-logo-example-paper { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: var(--crm-radius-md); min-height: 6rem; }
.crm-logo-example-header { background: var(--crm-surface-inset-bg); }
.crm-logo-example-paper { background: var(--crm-paper-bg); color: var(--crm-paper-ink); border: 1px solid var(--crm-paper-rule); }
.crm-logo-example-header > span { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--crm-radius-sm); }
.crm-logo-example-paper > span { display: grid; place-items: center; width: 6rem; height: 2.5rem; flex: 0 0 6rem; }
.crm-logo-examples strong { font-size: var(--crm-type-caption); overflow-wrap: anywhere; }
.crm-logo-file-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 560px) {
  .crm-logo-editor-grid,
.crm-logo-examples { grid-template-columns: minmax(0, 1fr); }
  .crm-logo-editor-stage { height: 10rem; }
  .crm-logo-example-header,
.crm-logo-example-paper { min-height: 4rem; }
  .crm-logo-dialog .crm-date-dialog__actions { flex-wrap: wrap; }
}

.crm-logo-example-navigation {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-height: 6rem;
  padding: var(--crm-space-3);
  border-radius: var(--crm-radius-md);
  background: var(--crm-surface-inset-bg);
}
.crm-logo-example-navigation > span {
  display: grid;
  place-items: center;
  width: 2.65rem;
  flex: 0 0 2.65rem;
  height: 2.65rem;
  border-radius: var(--crm-radius-sm);
}
@media (max-width: 560px) {
  .crm-logo-example-navigation { min-height: 4rem; }
}

}