/* Shared screen typography, matching the warehouse task cards.
   Load after the layout sheets so every presentation uses the same type scale.
   Print documents retain their existing typography and page dimensions. */
@font-face {font-family: Inter; src: url('/fonts/inter-variable.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap;}
@media screen {
  :is(#app, .elevation-typography) {
    --font-family: Inter, "Segoe UI", Arial, sans-serif;
    --type-heading-size: 18px;
    --type-heading-line: 24px;
    --type-heading-weight: 700;
    --type-body-size: 12px;
    --type-body-line: 18px;
    --type-control-weight: 600;
    --type-entry-size: 16px;
    font-family: var(--font-family);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 400;
    letter-spacing: normal;
  }

  /* Reading text, metadata, feedback, and tabular data. Keep semantic colors. */
  :is(#app, .elevation-typography) :where(p, small, li, blockquote, details, table, td, dt, dd, .muted, .field-hint,
    .toolbar, .pager, .filtertools, .filter-active, .breadcrumbs, .footer, .meta,
    .notice, .success, .error, .warning, .form-status, .signup-success,
    .bom-review-note, .bom-row-count, .bom-cycle-note, .password-requirement,
    .availability-label, .import-summary, .partner-card-next, .inventory-part-description,
    .partner-card-category, .menu-arrangement-tools, .menu-order-status,
    .sidebar-identity, .sidebar-note, .sidebar-note span, .sidebar-menu-caption,
    .signed-in-user, .stats span, .partner-portal-stats span,
    .import-archive-bar span, .calendar-weekday, .calendar-day small,
    .mobile-task-tile > span:not(.mobile-task-arrow)) {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 400;
    letter-spacing: normal;
  }
  :is(#app, .elevation-typography) :where(.field-hint, .password-requirement, .stats span,
    .mobile-task-heading p, .mobile-task-tile > span:not(.mobile-task-arrow),
    .record-details dt, .row-details-fields dt) {
    color: var(--muted, #64748B);
  }

  /* Page titles, section disclosures, card titles, and primary metrics. */
  :is(#app, .elevation-typography) :where(h1, h2, h3, h4, h5, h6, .header-title .app-name, header > .brand > span, header > div.brand,
    .mobile-task-tile strong, .stats strong, .partner-portal-stats strong,
    .mobile-open-tasks strong, .signup-success > strong, .asn-review-item > strong,
    .company-user-row > div > strong:first-child, .inventory-total-part) {
    font-size: var(--type-heading-size);
    line-height: var(--type-heading-line);
    font-weight: var(--type-heading-weight);
    letter-spacing: normal;
  }
  :is(#app, .elevation-typography) :where(h1, h2, h3, h4, h5, h6, .mobile-task-tile strong,
    .stats strong, .partner-portal-stats strong) {
    color: var(--primary, #0B2D5B);
  }

  /* Explicit emphasis prevents nested bold text escalating to weight900. */
  :is(#app, .elevation-typography) :where(b, strong) { font-weight: 700; }

  /* Controls remain touch-sized; only their type changes. */
  :is(#app, .elevation-typography) :where(button, .button, label, legend, th, summary, .status, .download,
    .workflow a, .part-tabs [role=tab], .mobile-open-tasks,
    .navheading, nav a, nav summary, .navigation-label,
    .sidebar-menu-toggle, .sidebar-workspace-menu > summary,
    .footer-help > summary, .footer-workspace > nav a,
    .advanced-filters > summary, .bom-mobile-details > summary,
    .source-captured-text > summary, .move-list summary) {
    font-family: var(--font-family);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: var(--type-control-weight);
    letter-spacing: normal;
  }
  /* Section disclosures are headings; inline disclosures remain controls. */
  :is(#app, .elevation-typography) :where(details.card > summary,
    .content-section > summary, .mobile-record-links > summary,
    .source-import-tools > summary, .document-controls > details > summary) {
    font-size: var(--type-heading-size);
    line-height: var(--type-heading-line);
    font-weight: var(--type-heading-weight);
  }
  :is(#app, .elevation-typography) .typography-on-dark :where(h1, h2, h3, h4, h5, h6) {
    color: inherit;
  }
  /* Preserve monospace only where whitespace and literal scan values matter. */
  :is(#app, .elevation-typography) :where(pre, code, kbd, samp) {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
  }
  :is(#app, .elevation-typography) .page-disclosure {
    font: inherit;
    letter-spacing: inherit;
  }

  /* Editable values stay readable and avoid automatic zoom on phone focus. */
  :is(#app, .elevation-typography) :where(input:not([type=checkbox], [type=radio], [type=hidden],
      [type=range], [type=color], [type=button], [type=submit], [type=reset]),
    select, textarea) {
    font-family: var(--font-family);
    font-size: var(--type-entry-size);
    line-height: 22px;
    font-weight: 400;
    letter-spacing: normal;
  }

  /* Use the body scale for descriptions, including compact inventory cards. */
  :is(#app, .elevation-typography) .inventory-stock-card > h3 + p {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
  }
  :is(#app, .elevation-typography) .inventory-lookup-hint > span {
    font-size: min(var(--type-body-size), 4cqw);
    line-height: var(--type-body-line);
  }
  :is(#app, .elevation-typography) .menu-arrangement-tools > span:last-child {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
  }
}