/* Global readability pass · 2026-07-17
 * Keep operational data dense, but never depend on 9–11px text for normal reading.
 */

:root {
  --readable-caption: 13px;
  --readable-label: 14px;
  --readable-body: 15px;
  --readable-control: 15px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* Shared account controls and notices */
.authStatus {
  min-height: 42px;
  font-size: var(--readable-label);
}

.authStatus strong,
.authStatus button {
  font-size: var(--readable-label);
}

.authStatus button {
  min-height: 32px;
  padding: 6px 10px;
}

.authPasswordTitle strong {
  font-size: 19px;
}

.authPasswordTitle button {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

.authPasswordForm label,
.authPasswordMessage {
  font-size: var(--readable-label);
  line-height: 1.55;
}

.authPasswordForm input {
  min-height: 44px;
  font-size: var(--readable-control);
}

.authPasswordActions button,
.noticePopupSecondary,
.noticePopupPrimary {
  min-height: 42px;
  font-size: var(--readable-label);
}

.noticePopupHeader span,
.noticePopupMeta {
  font-size: var(--readable-label);
}

.noticePopupContent {
  font-size: 17px;
}

/* Company administration */
.companyAdminApp {
  font-size: var(--readable-body);
  line-height: 1.55;
}

.companyAdminApp .topbar {
  min-height: 84px;
}

.companyAdminApp .topbarBrandMark {
  font-size: 14px;
}

.companyAdminApp .topbarTitle .topbarEyebrow,
.companyAdminApp .topbarTitle p {
  font-size: var(--readable-caption);
  line-height: 1.45;
}

.companyAdminApp .topbarTitle h1 {
  font-size: 22px;
}

.companyAdminApp .entryButton,
.companyAdminApp .refreshButton {
  min-height: 42px;
}

.companyAdminApp .entryButton span,
.companyAdminApp .entryButton strong,
.companyAdminApp .refreshButton {
  font-size: var(--readable-label);
}

.companyAdminApp .entryButton span {
  width: 34px;
  height: 27px;
}

.companyAdminApp .metricHero {
  grid-template-columns: 190px minmax(0, 1fr);
}

.companyAdminApp .metricHero span,
.companyAdminApp .metricHighlight span,
.companyAdminApp .metricMini span {
  font-size: var(--readable-caption);
}

.companyAdminApp .metricHero h2 {
  font-size: 24px;
}

.companyAdminApp .metricHero p,
.companyAdminApp .panelHead p {
  font-size: var(--readable-label);
  line-height: 1.6;
}

.companyAdminApp .metricHighlight {
  min-height: 106px;
}

.companyAdminApp .metricHighlight strong {
  font-size: 26px;
}

.companyAdminApp .metricHighlight small,
.companyAdminApp .companyHomePanel small {
  font-size: var(--readable-caption);
  line-height: 1.5;
}

.companyAdminApp .metricGroup h3,
.companyAdminApp .companyBlockHead h3,
.companyAdminApp .laborPanelHead h3,
.companyAdminApp .maintenanceBlockHead h3 {
  font-size: 16px;
}

.companyAdminApp .metricMini {
  min-height: 40px;
  padding-block: 8px;
}

.companyAdminApp .metricMini strong {
  font-size: 16px;
}

.companyAdminApp .layout {
  grid-template-columns: 244px minmax(0, 1fr);
}

.companyAdminApp .navGroupTitle {
  font-size: 12px;
  line-height: 1.5;
}

.companyAdminApp .tab,
.companyAdminApp .sidebarPageLink {
  min-height: 40px;
  padding-block: 10px;
  font-size: var(--readable-label);
  line-height: 1.35;
}

.companyAdminApp .panelHead {
  min-height: 84px;
}

.companyAdminApp .panelHead h2 {
  font-size: 22px;
}

.companyAdminApp .panelActions .secondaryButton,
.companyAdminApp .panelActions .plainButton,
.companyAdminApp .panelActions .primaryButton,
.companyAdminApp .panelActions .refreshButton,
.companyAdminApp .primaryButton,
.companyAdminApp .secondaryButton,
.companyAdminApp .plainButton,
.companyAdminApp .dangerButton,
.companyAdminApp .tableButton {
  min-height: 40px;
  padding: 9px 13px;
  font-size: var(--readable-label);
}

.companyAdminApp input,
.companyAdminApp select,
.companyAdminApp textarea,
.companyAdminApp #searchInput,
.companyAdminApp #tripDateInput {
  min-height: 42px;
  font-size: var(--readable-control);
  line-height: 1.4;
}

.companyAdminApp th {
  padding: 12px 13px;
  font-size: var(--readable-label);
  line-height: 1.4;
}

.companyAdminApp td {
  padding: 12px 13px;
  font-size: var(--readable-body);
  line-height: 1.5;
}

.companyAdminApp .companyHero > div:first-child > span,
.companyAdminApp .sensitiveDataGuardBadge {
  font-size: var(--readable-caption);
}

.companyAdminApp .companyHomePanel p,
.companyAdminApp .companyHomePanel label,
.companyAdminApp .companyHomePanel li,
.companyAdminApp .companyBlock span,
.companyAdminApp .todoItem,
.companyAdminApp .quickLink,
.companyAdminApp .homeLoadRow {
  font-size: var(--readable-label);
  line-height: 1.55;
}

.companyAdminApp .sensitiveDataGuard strong {
  font-size: var(--readable-body);
}

.companyAdminApp .sensitiveDataGuard p {
  font-size: var(--readable-caption);
  line-height: 1.6;
}

/* Project manager and detail pages */
.managerApp,
.managerDetailWorkspace {
  font-size: var(--readable-body);
  line-height: 1.55;
}

.managerApp button,
.managerApp input,
.managerApp select,
.managerApp textarea,
.managerDetailWorkspace button,
.managerDetailWorkspace input,
.managerDetailWorkspace select {
  font-size: var(--readable-control);
}

.managerTitle span {
  font-size: 12px;
}

.managerTitle h1,
.managerTop h1 {
  font-size: 23px;
}

.managerDateControl label,
.managerVisualLabel,
.managerApp p,
.managerApp label,
.managerDetailWorkspace label,
.managerDetailWorkspace .tableHead span {
  font-size: var(--readable-label);
  line-height: 1.55;
}

#refreshManagerButton,
.managerReportButton {
  min-height: 42px;
  font-size: var(--readable-label);
}

.focusTitle {
  font-size: 16px;
}

.focusItem span,
.focusItem small,
.managerVisualCard small {
  font-size: var(--readable-caption);
}

.managerVisualCard p {
  font-size: var(--readable-label);
}

.managerDetailWorkspace .tableHead h2 {
  font-size: 27px;
}

.managerDetailWorkspace th {
  font-size: var(--readable-label);
}

.managerDetailWorkspace td {
  font-size: var(--readable-body);
}

/* Driver, captain and geofence operational pages */
.driverWorkspace,
.captainWorkspace,
.geofenceWorkspace {
  line-height: 1.55;
}

.captainWorkspace,
.geofenceWorkspace {
  font-size: 16px;
}

.driverWorkspace small,
.captainWorkspace small,
.geofenceWorkspace small,
.driverWorkspace .driverTop span,
.captainWorkspace .captainTop span,
.geofenceWorkspace .pageIntro p {
  font-size: var(--readable-caption);
  line-height: 1.5;
}

.driverWorkspace button,
.driverWorkspace input,
.driverWorkspace select,
.driverWorkspace textarea,
.captainWorkspace button,
.captainWorkspace input,
.captainWorkspace select,
.captainWorkspace textarea,
.geofenceWorkspace button,
.geofenceWorkspace input,
.geofenceWorkspace select {
  font-size: 16px;
}

/* Operations command screen */
.screenApp {
  font-size: var(--readable-label);
  line-height: 1.45;
}

.screenApp .projectTag strong,
.screenApp .screenTitle p,
.screenApp .screenStatus span,
.screenApp .metricCard em,
.screenApp .panelHead span,
.screenApp .screenDetailHead span {
  font-size: var(--readable-caption);
}

.screenApp .screenControls input,
.screenApp .screenControls button,
.screenApp .screenControls a,
.screenApp .screenControls .authStatus {
  height: 38px;
  font-size: var(--readable-caption);
}

.screenApp .metricCard span {
  font-size: var(--readable-caption);
}

.screenApp .panelHead h2 {
  font-size: 16px;
}

.screenApp .screenPanel.screenDetailTrigger .panelHead::after {
  font-size: 12px;
}

.screenApp th {
  font-size: var(--readable-caption);
}

.screenApp td {
  font-size: var(--readable-label);
}

/* Agent access console */
.agentAccessWorkspace {
  font-size: var(--readable-body);
  line-height: 1.55;
}

.agentAccessWorkspace p,
.agentAccessWorkspace label {
  font-size: var(--readable-label);
}

.agentAccessWorkspace small,
.agentAccessWorkspace .scopeChip,
.agentAccessWorkspace .toolTag,
.agentAccessWorkspace .keyStatus,
.agentAccessWorkspace .keyMeta,
.agentAccessWorkspace .toolLevel,
.agentAccessWorkspace .dialogChoiceTitle small,
.agentAccessWorkspace .toolChoice small {
  font-size: var(--readable-caption);
  line-height: 1.5;
}

.agentAccessWorkspace button,
.agentAccessWorkspace input,
.agentAccessWorkspace select,
.agentAccessWorkspace textarea {
  font-size: var(--readable-control);
}

.agentAccessWorkspace .sectionHeader h2 {
  font-size: 24px;
}

.agentAccessWorkspace .accessSwitch,
.agentAccessWorkspace .createKeyButton,
.agentAccessWorkspace .revokeKeyButton {
  min-height: 40px;
  font-size: var(--readable-label);
}

.agentAccessWorkspace .toolCard strong,
.agentAccessWorkspace .keyHead strong,
.agentAccessWorkspace .secretUsage strong {
  font-size: var(--readable-body);
}

.agentAccessWorkspace .formGrid input,
.agentAccessWorkspace .formGrid select {
  min-height: 46px;
}

/* Authentication and public portal */
.authEntry,
.publicPortal {
  font-size: 16px;
  line-height: 1.55;
}

.authEntry .loginBrand small,
.authEntry .loginHead > span,
.authEntry .visualFoot,
.authEntry .formDivider {
  font-size: var(--readable-caption);
}

.authEntry .loginVisual p,
.authEntry .loginHead p,
.authEntry .loginForm label > span {
  font-size: var(--readable-label);
  line-height: 1.6;
}

.authEntry .backHome,
.authEntry .loginLinks a,
.authEntry .icpFooter {
  font-size: var(--readable-label);
}

.authEntry .loginForm input {
  min-height: 52px;
  font-size: 16px;
}

.authEntry .loginForm button {
  min-height: 52px;
  font-size: 16px;
}

.publicPortal p {
  font-size: var(--readable-body);
  line-height: 1.75;
}

.publicPortal small,
.publicPortal .portalEyebrow,
.publicPortal .metricLabel,
.publicPortal .portalFooterMeta {
  font-size: var(--readable-caption);
}

.publicPortal .portalNav a,
.publicPortal button,
.publicPortal input,
.publicPortal select {
  font-size: var(--readable-label);
}

.icpFooter,
.icpFooter a {
  font-size: var(--readable-caption);
}

@media (max-width: 760px) {
  :root {
    --readable-caption: 13px;
    --readable-label: 14px;
    --readable-body: 15px;
    --readable-control: 16px;
  }

  .authEntry .loginForm input,
  .authEntry .loginForm button {
    min-height: 54px;
  }
}