/*
 * The system's type: Inter everywhere on screen. Loaded last by every
 * layout. Icon fonts (Bootstrap Icons, Font Awesome) set their own family on
 * their glyphs and are left alone, as is code. The paper a Summary or Note is
 * written on keeps Times, as it prints.
 */
@import url('/vendor/fonts/fonts.css');

html body,
html body :not(i):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not(code):not(pre):not(kbd):not(samp):not(.sc-paper):not(.sc-paper *):not(.sd-pop--paper *) {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
}

/*
 * One type scale for every screen. Every font-size in the app's own styles
 * is one of these steps; nothing smaller than 12px:
 *   12px  labels, counts, column headings, meta
 *   13px  table cells, secondary text, buttons, form fields
 *   14px  body text (the default)
 *   16 / 18 / 20px  section, sub-page and page titles
 *   24 / 28 / 32px and up  dashboard figures only
 * Headings stay at 600, not black. Kept at low specificity, so a screen's
 * own sizes still win where it sets them; a new size must be a step here.
 * Emails, PDFs and print layouts keep their own sizes.
 */
:root {
    --fs-meta: 12px;
    --fs-small: 13px;
    --fs-body: 14px;
    --fs-section: 16px;
    --fs-subtitle: 18px;
    --fs-title: 20px;
    --fs-figure: 24px;
    --fs-figure-lg: 32px;
    --fs-icon-lg: 40px;
    --fs-icon-xl: 48px;
    /* Flag slips only: their words are written small, as on a paper flag. */
    --fs-slip: 11px;
    --fs-slip-sm: 10px;
}
html body {
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}
html :where(body .app-container) :where(h1, .h1) { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
html :where(body .app-container) :where(h2, .h2) { font-size: 18px; font-weight: 600; letter-spacing: -.005em; }
html :where(body .app-container) :where(h3, .h3) { font-size: 16px; font-weight: 600; }
html :where(body .app-container) :where(h4, .h4) { font-size: 14px; font-weight: 600; }
html :where(body .app-container) :where(h5, .h5) { font-size: 14px; font-weight: 600; }
html :where(body .app-container) :where(h6, .h6) { font-size: 13px; font-weight: 600; }
:where(.app-container, .modal) .btn:where(:not(.btn-lg)) { --bs-btn-font-size: 13px; }
:where(.app-container, .modal) .btn-sm { --bs-btn-font-size: 12px; }
:where(.app-container, .modal) .form-control:where(:not(.form-control-lg)),
:where(.app-container, .modal) .form-select:where(:not(.form-select-lg)),
:where(.app-container, .modal) .form-label,
:where(.app-container, .modal) .dropdown-item { font-size: 13px; }
:where(.app-container, .modal) .form-text { font-size: 12px; }
:where(.app-container, .modal) .badge { font-size: 12px; font-weight: 600; }
:where(.app-container, .modal) .table { font-size: 13px; }
:where(.app-container, .modal) .table > thead th { font-size: 12px; font-weight: 600; }
:where(.modal) .modal-title { font-size: 16px; font-weight: 600; }

/* Top bar: menu items and their counts. */
html body .system-navbar .system-primary-nav .nav-link {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1b2537 !important;
}
html body .system-navbar .system-primary-nav .nav-link.active,
html body .system-navbar .system-primary-nav .nav-link[aria-current="page"] { font-weight: 600 !important; }
html body .system-navbar .system-primary-nav .nav-link .badge,
html body .system-navbar .system-primary-nav .nav-link [class*="count"] {
    font-size: 12px !important;
}
html body .system-navbar .dropdown-menu .dropdown-item {
    font-size: 13px !important;
    color: #1b2537 !important;
}
html body .system-navbar .brand-name { font-size: 16px !important; }

/* Small print follows the scale too, not 0.875em of its parent (12.25px). */
:where(.app-container, .modal, .offcanvas) :where(small, .small) { font-size: 12px; }

/*
 * Tablets in full web view (iPad and the like): a touch screen at desktop
 * width shows the whole interface 8% larger, so text, buttons and icons
 * grow together and the 12px meta reads as about 13px on a small,
 * high-resolution screen. Computers keep the scale above; phones (under
 * 768px) keep their own layer in mobile-app.css.
 */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
    html { zoom: 1.08; }
}