/* Shared type scale. Keep page-specific layout in panel.css; define type here. */
:root {
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-emphasis: 16px;
  --text-select: 17px;
  --text-section: 18px;
  --text-dialog: 24px;
  --text-page: 32px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  font-family: var(--font-ui);
  font-size: var(--text-base);
}
body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.55;
}
body :is(button, input, select, textarea) {
  font-family: var(--font-ui);
}
body
  :is(
    p,
    .muted,
    .distribution-note,
    .mapping-info-toolbar > .muted,
    .push-form-bottom p,
    .push-send p,
    .push-result-body,
    .push-external-hotel,
    .config-body > .muted,
    .config-save > .muted,
    .push-config-choice,
    .master-empty p,
    .ari-welcome p,
    .canvas-content p,
    .dialog-top + .muted,
    #password-form > .muted,
    .login-form > .muted,
    .story-content p
  ) {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.65;
}
body :is(.page-heading h1, .login-form h2) {
  font-size: var(--text-page);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.8px;
}
body
  :is(
    .record-dialog-header h2,
    .dialog-top h2,
    .canvas-content h2,
    .master-empty h2,
    .ari-welcome h2
  ) {
  font-size: var(--text-dialog);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.4px;
}
body :is(.month-navigation h2, .ari-product-context strong) {
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
body
  :is(
    .records-card-heading strong,
    .field-section h3,
    .push-issues h3,
    .config-room-heading,
    .config-summary strong,
    .mock-xml-list summary,
    #mock-attempts summary,
    .push-gaps summary,
    .push-products h3
  ) {
  font-size: var(--text-emphasis);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}
/* Tabs have the same metrics in Calendar, Channels and Mappings. */
body :is(.ari-tabs [role='tab'], .distribution-tabs button) {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: 0;
  padding: 14px 18px;
}
body :is(.ari-tabs [aria-selected='true'], .distribution-tabs button.selected) {
  font-weight: var(--weight-semibold);
}
body
  :is(
    .nav-link,
    .breadcrumbs,
    .profile-menu button,
    .primary,
    .secondary,
    .text-button,
    .record-dialog .primary,
    .toolbar-actions .primary,
    .ari-toolbar .primary,
    .ari-actions button,
    .credential-actions button,
    .ari-context-menu button
  ) {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.45;
  letter-spacing: 0;
}
body :is(.nav-link.active, .breadcrumbs span:last-child) {
  font-weight: var(--weight-semibold);
}
body
  :is(
    label,
    .form-field label,
    .ari-filters label,
    .config-toggle,
    .config-time-heading,
    .config-plans label,
    .user-hotels label,
    .restriction-switches label
  ) {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.45;
  letter-spacing: 0;
}
body
  :is(
    input,
    select,
    .form-field input,
    .form-field select,
    .search-box input,
    .toolbar-actions select,
    .ari-monthbar input
  ) {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.45;
}
body input::placeholder {
  font-size: inherit;
  font-weight: var(--weight-regular);
}
body
  :is(
    select option,
    .form-field select option,
    .ari-filters select option,
    .hotel-context select option
  ) {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
}
body
  :is(.context-pill, .record-name, .records-table .hotel-name-cell, .ari-product-context > span) {
  font-size: var(--text-emphasis);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}
/* Prominent dropdowns: bold; their size comes from the dropdown rule below. */
body :is(.hotel-context select, .ari-filters select) {
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}
body :is(.records-table th, .mapping-info-table .mapping-group th) {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}
body
  :is(
    .records-table td,
    .mapping-info-table tbody th[scope='row'],
    .mapping-missing,
    .profile-row dd,
    .detail-field dd
  ) {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
}
body .records-table .hotel-name-cell {
  font-size: var(--text-emphasis);
  font-weight: var(--weight-semibold);
}
body
  :is(
    .records-table small,
    .record-code,
    .mapping-info-table th small,
    .detail-field dt,
    .profile-row dt,
    .detail-meta,
    .record-timestamps,
    .records-scope,
    .table-footer,
    .form-field small,
    .user-hotels small,
    .field-section > p,
    .record-dialog-header .muted,
    .ari-priority-help,
    .ari-mode-note,
    .config-summary small,
    .config-room small,
    .users-summary span,
    .context-date,
    .push-steps,
    #credential-status,
    #ari-range-count,
    .records-card-heading #record-count,
    #ari-overrides .records-card-heading small
  ) {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: 1.6;
}
body
  :is(
    .eyebrow,
    .nav-group-title,
    .hotel-context label,
    .role-chip,
    .status-pill,
    .avatar,
    .workspace-badge,
    .profile-identity small,
    .menu-account small,
    .sidebar-bottom,
    .main-footer,
    .login-note,
    .login-bottom,
    .story-footer,
    .brand-tagline,
    .canvas-top,
    .canvas-bottom,
    .coming-next,
    .canvas-content > .eyebrow
  ) {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
}
body :is(.profile-identity strong, .menu-account strong) {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
body :is(.role-chip, .status-pill) {
  font-weight: var(--weight-semibold);
  letter-spacing: 0.3px;
}
body :is(.record-count-link, .inventory-input strong, .users-summary strong) {
  font-size: var(--text-dialog);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
body .inventory-input input {
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
}
body .ari-day strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
body
  :is(
    .ari-day .day-number,
    .ari-day .day-rooms,
    .ari-day .day-flags,
    .ari-day.unset strong,
    .ari-day.unset .day-rooms,
    .ari-weekdays span,
    .ari-legend
  ) {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: 1.45;
}
body :is(.ari-legend .ari-drag-hint, .ari-range-empty, .ari-overrides-empty) {
  font-size: var(--text-sm);
  line-height: 1.6;
}
body :is(.error:not(:empty), .ari-conflict-note, .push-errors) {
  font-size: var(--text-emphasis) !important;
  font-weight: var(--weight-medium);
  line-height: 1.65;
}
body .toast:not(.error) {
  font-size: var(--text-sm);
  line-height: 1.5;
}
body :is(.mock-xml-list textarea, #mock-attempts pre, .user-password) {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--text-sm);
  line-height: 1.6;
}
/* Preserve readable calendar cells on narrow screens rather than shrinking text. */
#ari-calendar {
  overflow-x: auto;
}
.ari-weekdays,
.ari-days {
  min-width: 630px;
}
@media (max-width: 760px) {
  :root {
    --text-page: 28px;
  }
  body .ari-tabs [role='tab'],
  body .distribution-tabs button {
    padding: 12px 14px;
  }
}

/* Connected tab headers and their content share one continuous outline. */
body :is(.ari-tabs, .distribution-tabs) {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin: 0;
  padding: 4px 4px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  position: relative;
  z-index: 1;
}
body :is(.ari-tabs [role='tab'], .distribution-tabs button) {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--brand-200);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #e4e4f1;
  color: #505067;
  box-shadow: none;
  transition:
    background 0.15s,
    color 0.15s;
}
body :is(.ari-tabs [role='tab'], .distribution-tabs button):hover {
  background: var(--brand-100);
  color: var(--brand-600);
}
body :is(.ari-tabs [aria-selected='true'], .distribution-tabs button.selected) {
  background: #fff;
  color: var(--brand-600);
  border: 1px solid var(--brand-300);
  border-bottom: 0;
  box-shadow: inset 0 4px 0 var(--brand-500);
  font-weight: var(--weight-semibold);
  position: relative;
}
body :is(.ari-tabs [aria-selected='true'], .distribution-tabs button.selected):hover {
  background: #fff;
  color: var(--brand-600);
}
body :is(.ari-tabs [role='tab'], .distribution-tabs button):focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: -5px;
}
.connected-tab-content {
  position: relative;
  margin-top: -1px;
  border: 1px solid var(--brand-300);
  border-radius: 0 0 12px 12px;
  background: #fff;
  padding: 22px;
  min-width: 0;
}
.connected-tab-content .ari-shared-monthbar {
  margin: 0 0 18px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.connected-tab-content > .master-toolbar {
  margin-top: 0;
}
.connected-tab-content > [role='tabpanel'] {
  margin: 0;
}
@media (max-width: 600px) {
  body :is(.ari-tabs, .distribution-tabs) {
    gap: 4px;
    padding-left: 0;
    padding-right: 0;
  }
  body :is(.ari-tabs [role='tab'], .distribution-tabs button) {
    padding: 12px 14px;
  }
  .connected-tab-content {
    padding: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.ari-tabs [role='tab'], .distribution-tabs button) {
    transition: none;
  }
}

/* Compact distribution reports and scheduling controls. */
.mapping-info-table th,
.mapping-info-table td {
  padding: 7px 10px !important;
  vertical-align: top;
}
.mapping-info-table small {
  display: inline !important;
  margin-left: 7px;
  line-height: 1.5;
}
.mapping-info-table .status-pill {
  padding: 2px 6px;
  font-size: 12px;
}
.mapping-info-table .mapping-group th {
  padding: 5px 10px !important;
}
.mapping-status-table {
  table-layout: fixed;
  min-width: 740px;
}
.mapping-status-table th,
.mapping-status-table td {
  padding: 8px 12px;
  vertical-align: top;
  width: 33.33%;
}
.mapping-status-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
  border-bottom: 1px solid #ebebf4;
  font-size: 14px;
}
.mapping-status-item:last-child {
  border-bottom: 0;
}
.mapping-status-item small {
  display: inline;
  font-size: 12px;
  color: inherit;
}
.mapping-status-item code {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.mapping-status-item.mapping-missing {
  color: #b42318;
  background: #fff3f1;
  border-radius: 4px;
  padding: 4px 6px;
}
.danger-text {
  color: #b42318 !important;
}
.config-timezone {
  max-width: 300px;
}
.config-body {
  padding: 16px 20px;
}
.config-body > p {
  margin: 8px 0;
}
.config-times {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.config-times > div {
  width: 194px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.config-times input[type='time'] {
  width: 150px;
  min-width: 150px;
  flex: 1;
  padding: 9px 10px;
}
.config-policy-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
}
.adapter-rules {
  font-size: 14px;
  line-height: 1.6;
}
.adapter-rules ul {
  padding-left: 22px;
  margin: 8px 0;
}
.adapter-rules li {
  margin-bottom: 7px;
}
.adapter-policy-section textarea {
  width: 100%;
  font: inherit;
  padding: 10px;
  border: 1px solid #c8c8e2;
  border-radius: 8px;
  box-sizing: border-box;
}
.policy-notes {
  white-space: pre-wrap;
}
@media (max-width: 800px) {
  .config-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .config-policy-grid {
    grid-template-columns: 1fr;
  }
  .config-timezone {
    max-width: none;
  }
}
.mapping-info-table,
.mapping-status-table {
  white-space: normal;
}
.mapping-info-table th {
  min-width: 180px;
  max-width: 300px;
  line-height: 1.7;
}
.mapping-info-table td code {
  overflow-wrap: anywhere;
}
.mapping-info-toolbar {
  margin-bottom: 16px !important;
  gap: 12px !important;
}
.mapping-info-toolbar > .muted {
  margin: 0;
}
#mapping-info-content .records-card-heading,
#mapping-status-content .records-card-heading {
  padding: 12px 14px;
}
.config-time-heading {
  margin-top: 16px;
}

/* Dropdowns: the closed box and its options use one larger size so choices
   are easy to read. Layout of the open list lives in panel.css. */
body
  :is(
    select,
    .form-field select,
    .toolbar-actions select,
    .hotel-context select,
    .ari-filters select
  ) {
  font-size: var(--text-select);
}
body
  :is(
    select option,
    .form-field select option,
    .ari-filters select option,
    .hotel-context select option
  ) {
  font-size: var(--text-select);
}

.integration-section h4 {
  font-size: 12px;
  font-weight: 600;
}

.help-button {
  font-size: 11px;
  font-weight: 600;
}
/* The id outranks the generic dialog paragraph sizes. */
#info-dialog .info-body :is(p, li, dd) {
  font-size: 14px;
}
#info-dialog .info-body :is(h4, dt) {
  font-size: 14px;
  font-weight: 600;
}

.period-chips button,
.pager button,
.pager-range {
  font-size: 12px;
}

#info-dialog .review-xml pre {
  font:
    12px/1.6 ui-monospace,
    monospace;
}