/* Responsive reading sizes and contrast, loaded after the component styles.
   Text scales down with the viewport; narrow cards wrap their content. */
:root {
  --font-ui: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--font-ui);
}
button, input, select, textarea { font-family: inherit; }

@media screen {
  :root {
    --text-tiny: clamp(10px, calc(9.7px + .1vw), 11px);
    --text-small: clamp(11px, calc(10.7px + .1vw), 12px);
    --text-body: clamp(12px, calc(11.5px + .1vw), 13px);
    --text-title: clamp(13px, calc(12.4px + .12vw), 14px);
    --text-control: clamp(14px, calc(13.4px + .12vw), 15px);
    --text-section: clamp(15px, calc(14px + .2vw), 17px);
    --text-number: clamp(18px, calc(16px + .4vw), 22px);
    font-size: var(--text-body);
    --ink: #202534;
    --secondary: #4d5361;
    --muted: #606675;
    --violet: #6842c2;
    --violet-dark: #5732ad;
  }
  body { font-weight: 400; line-height: 1.45; }
  h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -.025em; }
  .eyebrow, .nav-caption, .report-eyebrow, .fleet-list-eyebrow { font-size: var(--text-small); font-weight: 700; letter-spacing: .08em; color: var(--secondary); }
  .button, .text-button, .sidebar .nav-link, .nav-submenu .nav-link, .sidebar-bottom .nav-link,
  .menu-section .nav-link, .workspace-switch, .menu-section h3 { font-size: var(--text-body); line-height: 1.4; font-weight: 600; }
  .sidebar .nav-link:not(.active) { color: var(--secondary); }
  .sidebar .nav-submenu .nav-link { font-size: var(--text-body); }
  .button { min-height: 36px; }
  .button-white, .icon-button { color: var(--secondary); }
  .workspace-switch small, .sidebar-profile small, .nav-count, .count-badge,
  .vehicles-heading .count-badge { font-size: var(--text-small); color: var(--secondary); }
  .sidebar-profile strong { font-size: var(--text-body); }
  .avatar { font-size: var(--text-body); }
  .brand .brand-wordmark > [data-brand-name] { font-size: var(--text-control); line-height: 1.3; letter-spacing: 0; }
  .brand .brand-wordmark > [data-brand-tagline] { font-size: var(--text-tiny); letter-spacing: 0; }
  .topbar .mobile-brand > strong > [data-brand-name] { font-size: var(--text-body); letter-spacing: 0; }
  .topbar .mobile-brand > strong > [data-brand-tagline] { font-size: var(--text-tiny); }
  .breadcrumb, .dashboard-active .breadcrumb, .date-label, .desktop-header-actions .date-label,
  .demo-label, .connection-label { font-size: var(--text-small); font-weight: 500; color: var(--secondary); }
  .connection-label:not(.is-error) { color: #216747; }
  .connection-label.is-error, .connection-notice, .gps-warning, .map-notice { color: #80521d; }
  .connection-notice, .dashboard-active .connection-notice, .map-notice, .form-message { font-size: var(--text-body); line-height: 1.5; }
  .form-message, .share-error { color: #a42d42; }
  .page-heading p:not(.eyebrow), .section-toolbar p, .vehicles-heading p, .geofence-card p,
  .form-hint, .assignment-list small, .report-note, .report-range, .route-stop p,
  .preference-row small, .notification-item p, .playback-info, .relay-state-note {
    font-size: var(--text-body); line-height: 1.55; color: var(--secondary);
  }
  .empty-state, .empty-state h3, .dialog-copy, .toast, .detail-grid strong { color: var(--ink); }
  .dialog-copy, .empty-state p, .toast, .preference-row strong, .notification-item h3, .route-stop strong { font-size: var(--text-body); line-height: 1.55; }
  .production-form label, .management-form legend, .filter-controls label, #geofence-points { font-size: var(--text-body); color: var(--secondary); }
  .production-form input, .production-form select, .production-form textarea, .share-field input,
  .search-field input, .filter-controls select { font-size: var(--text-body); color: var(--ink); }
  input::placeholder, textarea::placeholder, .search-field input::placeholder { color: var(--muted); opacity: 1; }
  .search-field kbd { font-size: var(--text-small); color: var(--muted); }
  .filter-controls .text-button, .vehicle-tabs button { font-size: var(--text-body); color: var(--secondary); }
  .vehicle-tabs button.active { color: var(--violet); }
  .auth-panel-inner > p:not(.eyebrow), .auth-panel .auth-footnote { font-size: var(--text-body) !important; color: var(--secondary); }
  .auth-panel .button { font-size: var(--text-control); }
  .auth-brand [data-brand-tagline] { font-size: var(--text-body); }
  .auth-intro > p:last-of-type { font-size: var(--text-control); color: var(--secondary); }
  .has-brand-background .auth-intro { background: linear-gradient(180deg,#ffffffc9,#ffffffb3); }

  /* Fleet text remains readable inside narrow cards and map details. */
  .fleet-status-bar .summary-label { font-size: var(--text-small); font-weight: 600; line-height: 1.25; color: var(--secondary); white-space: normal; }
  .fleet-status-bar .summary-number { font-size: var(--text-number); font-weight: 700; letter-spacing: 0; }
  .fleet-status-bar .extra-status { font-size: var(--text-small); font-weight: 500; }
  .vehicle-registration, .vehicle-card .vehicle-registration,
  .drawer-detail-heading .vehicle-registration, .vehicle-popup-heading strong { font-size: var(--text-title); font-weight: 700; line-height: 1.4; letter-spacing: 0; }
  .vehicle-registration { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
  .vehicle-registration .status-pill { flex: none; }
  .drawer-detail-heading .vehicle-registration { flex: 1; }
  .vehicle-address, .vehicle-card-bottom, .vehicle-updated, .vehicle-list-footer,
  .drawer-gps-time, .vehicle-popup-heading small, .vehicle-popup-status > span:last-child,
  .vehicle-popup-row small, .workspace-footer, .workspace-footer > span:first-child { font-size: var(--text-small); line-height: 1.5; color: var(--secondary); }
  .vehicle-address, .vehicle-popup-row { font-size: var(--text-body); }
  .status-pill, td .status-pill, .popup-fence-badge { font-size: var(--text-small); font-weight: 600; }
  .status-pill.running { color: #166441; }
  .status-pill.idle { color: #805800; }
  .status-pill.stopped { color: #a02d3d; }
  .status-pill.inactive, .status-pill.nodata { color: #505766; }
  .status-pill.expired { color: #84501d; }
  .telemetry-item { flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--text-body); color: var(--ink); }
  .telemetry-item > span { min-width: 0; max-width: 100%; }
  .telemetry-item { text-align: left; }
  .telemetry-item strong, .drawer-detail-panel .telemetry-item strong { font-size: var(--text-body); font-weight: 600; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .telemetry-item small, .drawer-detail-panel .telemetry-item small { font-size: var(--text-small); line-height: 1.35; color: var(--secondary); overflow-wrap: anywhere; }
  .telemetry-item.is-on { color: #176741; }
  .telemetry-item.is-off { color: #9d3448; }
  .telemetry-item.is-unknown, .telemetry-item.is-stale { color: var(--muted); }
  .vehicle-popup .card-telemetry, .drawer-detail-panel .card-telemetry { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px 6px; }
  .vehicle-action-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  .vehicle-action, .drawer-detail-panel .vehicle-action { font-size: var(--text-small); font-weight: 600; line-height: 1.3; min-height: 40px; color: var(--secondary); }
  .vehicle-action > span { max-width: 100%; overflow-wrap: anywhere; }
  .drawer-detail-heading .text-button, .drawer-gps-time .text-button,
  .movement-preview, .movement-preview .text-button, .movement-event, .movement-totals { font-size: var(--text-body); }
  .movement-event small { font-size: var(--text-small); }
  .movement-event { grid-template-columns: 85px minmax(0,1fr); }
  .drawer-gps-time { flex-wrap: wrap; }
  .map-caption { font-size: var(--text-body); }
  .map-region, .fleet-list-launch .map-region, .marker-label, .map-legend { font-size: var(--text-small); color: var(--secondary); }
  .map-panel .map-legend { bottom: 20px; flex-wrap: wrap; max-width: calc(100% - 80px); }
  .dashboard-active .leaflet-control-scale { margin-bottom: 54px !important; }
  .map-layer-switch button { font-size: var(--text-body); font-weight: 600; color: var(--secondary); }
  .map-layer-switch button.active { color: white; }
  .leaflet-control-attribution { font-size: var(--text-tiny) !important; line-height: 1.4; color: var(--secondary); }
  .leaflet-control-attribution a { color: #464456; }
  .leaflet-control-scale-line { font-size: var(--text-tiny); }
  .sheet-handle-label { font-size: var(--text-small); }

  /* Management, reports and the public share viewer use the same text scale. */
  th { font-size: var(--text-small); font-weight: 700; color: var(--secondary); }
  td { font-size: var(--text-body); color: var(--ink); }
  td small, .detail-grid small, .geofence-meta { font-size: var(--text-small); color: var(--secondary); }
  td .text-button { font-size: var(--text-body); }
  .detail-grid strong, .share-details .detail-grid strong { font-size: var(--text-title); font-weight: 600; }
  .share-header p { font-size: var(--text-body); }
  .report-header p, .report-section-heading p, .report-chart-card p, .report-download-status,
  .report-kpi span, .report-kpi small, .report-address small, .report-row-count,
  .report-error span, .report-empty span, .report-loading { font-size: var(--text-body); color: var(--secondary); line-height: 1.5; }
  .report-kpi span { font-weight: 600; }
  .report-kpi strong { font-size: var(--text-number); color: var(--ink); font-weight: 700; line-height: 1.3; }
  .report-tab, .report-header-actions .btn, .report-shell .btn { font-size: var(--text-body); font-weight: 600; line-height: 1.4; min-height: 40px; }
  .report-tab { color: var(--secondary); }
  .report-tab.active { color: var(--violet); }
  .report-filter-field label, .report-datetime-time label { font-size: var(--text-body); color: var(--secondary); }
  .report-shell .form-control, .report-shell .form-select, .report-filter-field .report-vehicle-row,
  .report-vehicle-search input, .report-datetime-title, .report-datetime-day { font-size: var(--text-body); color: var(--ink); }
  .report-datetime-day.is-selected { color: white; }
  .report-datetime-day.is-muted { color: #6b7280; }
  .report-datetime-time-inputs input, .report-datetime-time-inputs select.report-datetime-period { font-size: var(--text-control); }
  .report-datetime-week span, .report-vehicle-row-meta { font-size: var(--text-small); color: var(--secondary); }
  .report-vehicle-actions .report-vehicle-select-all, .report-vehicle-actions .report-vehicle-clear,
  .report-datetime-actions .btn, .report-pagination .btn { font-size: var(--text-body); }
  .report-table th { font-size: var(--text-small); font-weight: 700; letter-spacing: .015em; color: var(--secondary); }
  .report-table td, .report-address-text { font-size: var(--text-body); color: var(--ink); line-height: 1.5; }
  .report-status, .report-type, .report-severity, .report-map-button { font-size: var(--text-small); font-weight: 600; }
  .report-section-heading h2, .report-chart-card h2 { font-size: var(--text-section); }
  .report-header h1 { font-size: clamp(18px, calc(16px + .4vw), 22px); }
  .report-address-attribution { font-size: var(--text-small); color: var(--secondary); }
  .report-address-attribution a { color: var(--violet); }
  .report-table td, .telemetry-item strong, .summary-number { font-variant-numeric: tabular-nums; }
}

@media screen and (max-width:760px), screen and (max-width:1024px) and (max-height:500px) {
  .fleet-status-bar .summary-number { font-size: var(--text-number); }
  .fleet-status-bar .summary-item { min-height: 40px; }
  .fleet-status-bar .extra-status { font-size: var(--text-small); padding: 2px 7px; gap: 4px; }
  .fleet-status-bar .extra-status strong { margin-left: 2px; }
  .mobile-nav a, .mobile-nav button { font-size: var(--text-small); font-weight: 600; gap: 3px; color: var(--secondary); line-height: 1.25; }
  .mobile-nav .active { color: var(--violet); }
  .fleet-list-heading p, .fleet-list-minimize { font-size: var(--text-small); }
  .fleet-list-open .vehicles-heading h2 { font-size: var(--text-body); }
  .fleet-list-launch > span:nth-child(2) { font-size: var(--text-body); }
  .fleet-list-launch .map-region { font-size: var(--text-small); }
  .map-layer-switch button { font-size: var(--text-small); padding: 8px; }
  .map-controls { top: 76px; }
  .dashboard-active .leaflet-control-scale { margin-bottom: 20px !important; }
  .report-kpi small, .report-kpi span { font-size: var(--text-small); }
  .report-header-actions .btn { font-size: var(--text-body); padding: 8px; }
  .report-tab { font-size: var(--text-body); }
  .report-kpi { padding: 10px; }
}
@media screen and (max-width:1024px) and (max-height:500px) {
  .fleet-status-bar .summary-item { min-height: 34px; }
  .fleet-status-bar .summary-number { font-size: 17px; }
  .map-controls { top: 64px; }
}