:root {
  --ops-font-family: Arial, Helvetica, sans-serif;
  --ops-font-meta-size: 11px;
  --ops-font-meta-line: 1.35;
  --ops-font-secondary-size: 12px;
  --ops-font-secondary-line: 1.4;
  --ops-font-body-size: 13px;
  --ops-font-body-line: 1.45;
  --ops-font-tertiary-size: 14px;
  --ops-font-tertiary-line: 1.35;
  --ops-font-section-size: 15px;
  --ops-font-section-line: 1.3;
  --ops-font-major-size: 16px;
  --ops-font-major-line: 1.25;
  --ops-font-title-size: 18px;
  --ops-font-title-line: 1.2;
  --ops-font-weight-regular: 400;
  --ops-font-weight-semibold: 600;
  --ops-font-weight-bold: 700;

  --ops-space-1: 3px;
  --ops-space-2: 6px;
  --ops-space-3: 9px;
  --ops-space-4: 12px;
  --ops-space-5: 16px;
  --ops-space-6: 20px;
  --ops-space-7: 24px;
  --ops-space-page: 32px;

  --ops-color-white: #ffffff;
  --ops-color-gray-025: #fafafa;
  --ops-color-gray-050: #f6f6f6;
  --ops-color-gray-100: #ececec;
  --ops-color-gray-200: #dcdcdc;
  --ops-color-gray-300: #c7c7c7;
  --ops-color-gray-400: #a6a6a6;
  --ops-color-gray-500: #7d7d7d;
  --ops-color-gray-600: #5f5f5f;
  --ops-color-gray-700: #424242;
  --ops-color-gray-800: #2b2b2b;
  --ops-color-error: #b42318;
  --ops-color-backdrop: rgb(43 43 43 / 20%);
  --ops-color-handle-hover: rgb(246 246 246 / 60%);

  --ops-border: 1px solid var(--ops-color-gray-200);
  --ops-divider: 1px solid var(--ops-color-gray-200);
  --ops-focus-ring: 0 0 0 2px var(--ops-color-white), 0 0 0 4px var(--ops-color-gray-700);

  --ops-radius-1: 2px;
  --ops-radius-2: 4px;
  --ops-radius-3: 6px;
  --ops-radius-4: 8px;
  --ops-radius-pill: 999px;

  --ops-control-action: 32px;
  --ops-control-input: 34px;
  --ops-control-badge: 20px;
  --ops-control-checkbox: 16px;
  --ops-control-switch: 20px;
  --ops-control-switch-knob: 14px;
  --ops-icon-small: 14px;
  --ops-icon-default: 16px;

  --ops-width-rail-global: 220px;
  --ops-width-rail-global-compact: 76px;
  --ops-width-rail-global-narrow: 68px;
  --ops-width-rail-channel: 244px;
  --ops-width-rail-channel-compact: 260px;
  --ops-width-rail-channel-narrow: 64px;
  --ops-width-panel-default: 380px;
  --ops-width-panel-min: 320px;
  --ops-width-panel-max: 520px;
  --ops-width-kanban-column: 256px;
  --ops-width-kanban-min: 1072px;
  --ops-width-form-readable: 920px;
}

/* Keep both sticky edges on roomy tables, then release the terminal edge only
 * when the table container becomes too narrow for a useful center lane. */
.ops-sticky-table {
  container-type: inline-size;
}

@container (max-width: 280px) {
  .ops-sticky-table [data-sticky="terminal"] {
    right: auto !important;
    max-width: none !important;
    box-shadow: none !important;
  }

  .ops-sticky-table thead [data-sticky="terminal"] {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  .ops-sticky-table tbody [data-sticky="terminal"] {
    position: static;
  }
}

@media (max-width: 992px) {
  .ops-global-rail[data-rail-variant="responsive"] {
    width: var(--ops-width-rail-global-compact);
    padding: var(--ops-space-2);
  }

  .ops-global-rail[data-rail-variant="responsive"] .ops-rail-compact-hidden {
    display: none;
  }

  .ops-global-rail[data-rail-variant="responsive"] .ops-rail-link {
    min-height: 40px;
    justify-content: center;
    padding-inline: var(--ops-space-1);
  }

  .ops-global-rail[data-rail-variant="responsive"] .ops-rail-tooltip {
    display: none;
  }

  .ops-global-rail[data-rail-variant="responsive"] .group:hover > .ops-rail-tooltip,
  .ops-global-rail[data-rail-variant="responsive"] .group:focus-within > .ops-rail-tooltip {
    display: block;
  }

  .ops-page-shell[data-rail-variant="responsive"] .ops-page-main {
    margin-left: var(--ops-width-rail-global-compact);
  }

  .ops-page-content {
    padding: var(--ops-space-5);
  }
}

@media (max-width: 640px) {
  .ops-global-rail[data-rail-variant="responsive"] {
    width: var(--ops-width-rail-global-narrow);
  }

  .ops-page-shell[data-rail-variant="responsive"] .ops-page-main {
    margin-left: var(--ops-width-rail-global-narrow);
  }

  .ops-page-content {
    padding: var(--ops-space-4);
  }
}
