/* SendGear type scale. Sizes are relative to the reader's browser preference.
 * Caption: short labels/counts. Small: supporting copy and compact controls.
 * Body: reading and input. Lead/title/section/page: increasingly strong hierarchy.
 * Keep physical print labels and the public landing display in their own scale.
 */
:root {
    --sg-text-caption: .75rem;
    --sg-text-small: .875rem;
    --sg-text-body: 1rem;
    --sg-text-lead: 1.125rem;
    --sg-text-title: 1.25rem;
    --sg-text-section: 1.5rem;
    --sg-text-page: 2rem;
    --sg-leading-copy: 1.5;
    --sg-leading-label: 1.4;
    --sg-leading-heading: 1.2;
}

@media screen {
    body { font-size: var(--sg-text-body); line-height: var(--sg-leading-copy); }
    button, input, select, textarea { font-family: inherit; }
    button { font-size: var(--sg-text-small); }

    /* Page identity stays consistent, including pages with photographic heroes. */
    #main-content h1:not(.hero-title),
    #main-content .trip-detail-ticket-wrap .trip-ticket-copy :is(h1, h2) {
        font-size: var(--sg-text-page);
        line-height: var(--sg-leading-heading);
        letter-spacing: -.035em;
        overflow-wrap: anywhere;
    }

    #main-content :is(.card-title, .ready-check-panel-heading h2,
        .checklist-builder-section-heading h2, .trip-summary-header h2,
        .trip-section-heading h2, .gear-card-header h2, .gear-results-heading h2) {
        font-size: var(--sg-text-title);
        line-height: var(--sg-leading-heading);
    }
    #main-content .legal-page-current h2 { font-size: var(--sg-text-section); }
    #main-content .legal-page h1 { font-size: var(--sg-text-page) !important; }
    #main-content .legal-page-current :is(p, li) { font-size: var(--sg-text-body); line-height: 1.65; }

    .modal-overlay :is(.modal-title, .modal-header h2, .modal-header h3) {
        font-size: var(--sg-text-title) !important;
        line-height: 1.25;
        letter-spacing: -.015em;
        overflow-wrap: anywhere;
    }
    .trip-category-picker {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
        gap: var(--space-xs);
    }
    .trip-category-picker > label { min-width: 0; }
    .trip-category-picker > label > span {
        font-size: var(--sg-text-caption);
        line-height: var(--sg-leading-label);
        overflow-wrap: anywhere;
    }

    /* This small set of role rules also wins over legacy inline font sizes.
     * Component padding, weight, colours and icon sizes remain independent. */
    :is(.btn, .filter-btn, .friends-tab, .trip-detail-action, .trip-nav-tab,
        .checklist-quick-run, .ready-check-runner-back, .checklist-builder-back,
        .gear-status-presets button, .settings-section-nav button,
        .circle-sport-filters button, .circle-post-actions button,
        .adventure-sport-filters button, .logbook-scope-switch button,
        .logbook-circle-share, .service-task-item, .legal-contents button,
        .trip-kit-state button, .trip-kit-bulk-actions button) {
        font-size: var(--sg-text-small) !important;
        line-height: var(--sg-leading-label);
    }
    .btn > span:not(:is(.badge, .count, .tab-count, .icon, .mobile-nav-icon)) { font-size: inherit; }
    :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]) {
        font-size: var(--sg-text-body) !important;
        font-weight: 500;
        line-height: var(--sg-leading-copy);
    }
    :is(.form-label, .checklist-builder-field > span, .checklist-builder-row-field > span,
        .service-board-picker > span, .gear-control > span, .gear-sport-card-copy small) {
        font-size: var(--sg-text-small) !important;
        line-height: var(--sg-leading-label);
    }
    :is(.form-hint, .form-help, .form-error, .checklist-storage-note,
        .checklist-builder-field > small, .checklist-builder-row-field > small,
        .checklist-builder-guide p, .gear-form-shell p, .gear-sport-photo-hint) {
        font-size: var(--sg-text-small) !important;
        line-height: var(--sg-leading-copy);
    }

    /* Item names and operational details should not read like footnotes. */
    :is(.ready-check-routine-copy strong, .checklist-history-name,
        .equipment-name, .borrowed-gear-card-copy strong, .compact-gear-copy strong,
        .service-item-link strong, .gear-send-card-copy strong, .fix-row-copy strong) {
        font-size: var(--sg-text-body) !important;
        line-height: var(--sg-leading-label);
    }
    :is(.ready-check-routine-copy small, .ready-check-detail-meta,
        .ready-check-detail-meta span, .ready-check-detail-meta strong,
        .ready-check-field-copy small, .ready-check-confirm-state,
        .checklist-section-title, .checklist-save-status,
        .equipment-type, .equipment-meta-item, .equipment-status,
        .service-indicator, .gear-service-due, .service-status-chip,
        .service-remaining strong, .service-task-count,
        .service-board-table td, .service-board-table th, .service-mono,
        .dashboard-next-trip-links button, .gear-sport-chip > span,
        .trip-kit-copy small, .trip-kit-scoreboard span,
        .trip-kit-responsible > span, .trip-tab-nav button > span,
        .alert-text, .fix-row-copy small, .circle-post-body p,
        .adventure-story-copy p, .list-item-subtitle, .detail-label) {
        font-size: var(--sg-text-small) !important;
        line-height: var(--sg-leading-copy);
    }
    :is(.page-subtitle, .gear-field-heading p, .ready-check-hero-copy p,
        .checklist-builder-hero-copy p, .ready-check-detail-heading p,
        .dashboard-next-trip-copy p, .trip-ticket-description) {
        font-size: var(--sg-text-body) !important;
        line-height: var(--sg-leading-copy);
    }
    :is(.mobile-nav-link > span:not(.mobile-nav-icon), .section-label, .dashboard-kicker,
        .locker-tunnel-status, .locker-tunnel-sport, .fishbone-month-label,
        .fishbone-label-title, .fishbone-label-date, .fishbone-label-subtitle) {
        font-size: var(--sg-text-caption) !important;
        line-height: var(--sg-leading-label);
    }
    :is(.section-label, .dashboard-kicker, .form-label) { letter-spacing: .06em; }
    .mobile-nav-link > span:not(.mobile-nav-icon) { letter-spacing: .025em; }
    .component-of-badge, .text-muted:where(small) { font-size: var(--sg-text-caption) !important; }
    .gear-page-actions summary.btn { font-size: 0 !important; }
    .gear-page-actions summary.btn i { font-size: var(--sg-text-body); }
    .gear-section > div > span { font-size: var(--sg-text-caption) !important; }
    .demo-conversion-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    .demo-conversion-actions .btn { white-space: normal; }
    .notification-badge { font-size: var(--sg-text-caption); min-width: 1.5em; height: auto; line-height: 1.5; }
    .page-footer-links :is(a, button) { font-size: var(--sg-text-small); }
    .ready-check-page .ready-check-routine-copy :is(strong, small) { white-space: normal; overflow: visible; text-overflow: clip; }
    .service-board-shell, .service-dashboard-panel { grid-template-columns: minmax(0, 1fr); }
    .service-board-shell > *, .service-dashboard-panel > * { min-width: 0; }
    .service-board-table .service-status-chip { max-width: 100%; white-space: normal; }
    .service-board-table .service-row-actions { white-space: normal; }

    @media (max-width: 700px) {
        :root { --sg-text-page: 1.75rem; }
        .ready-check-page .ready-check-routine-select { padding: 12px 8px; }
        .ready-check-routine-copy { min-width: 0; }
        .ready-check-routine-copy strong { white-space: normal; }
        .gear-field-header .gear-page-actions > .btn,
        .ready-check-page .ready-check-actions .btn { white-space: normal; }
        .gear-results-heading { flex-wrap: wrap; }
        .gear-results-heading > span { max-width: none; text-align: left; }
        .dashboard-home-header { flex-direction: column; align-items: stretch; gap: 12px; }
        .dashboard-home-actions { justify-content: flex-start; max-width: none; }
        .dashboard-home-header h1 { overflow-wrap: normal !important; }
        .main .gear-command-panel .gear-command-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
        .gear-command-panel .gear-control select { padding-inline: 10px 24px; }
    }
    @media (max-width: 359px) {
        .main .gear-command-panel .gear-command-row { grid-template-columns: minmax(0, 1fr); }
    }
}