:root {
    --app-readable-font: "Segoe UI Variable Text", "Aptos", "Inter", "Segoe UI", Arial, sans-serif;
    --app-readable-small: clamp(11px, .72rem, 12px);
    --app-readable-detail: clamp(11.5px, .76rem, 12.5px);
}

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

body,
button,
input,
select,
textarea {
    font-family: var(--app-readable-font) !important;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-size: 14px;
    line-height: 1.45;
}

button,
input,
select,
textarea {
    font-size: 14px;
}

@media screen {
    small,
    label,
    legend,
    th,
    .eyebrow,
    [class*="eyebrow"],
    .auth-kicker,
    .brand-kicker,
    [class*="kicker"],
    .brand-system span,
    .brand-footer,
    .auth-footer,
    .restricted,
    .section-title span,
    .web-shell-brand small,
    .web-shell-collapse,
    .web-shell-group,
    .web-shell-dock-link span,
    .web-shell-dock-close,
    .chart-legend,
    .legend,
    .daily-label,
    .daily-bar span,
    .bar-label,
    .bar-value,
    .report-label,
    .report-total,
    .group-level,
    .group-heading-level,
    .group-heading-totals,
    .sort-mark,
    .badge,
    .pill,
    .type-pill,
    .purpose-pill,
    .trip-status,
    .sync-pill,
    .pending,
    .stat-pill,
    .formula-part,
    .matrix-movement .matrix-balance,
    [class*="-label"],
    [class*="-count"],
    [class*="-badge"],
    [class*="-pill"] {
        font-size: var(--app-readable-small) !important;
        line-height: 1.35;
    }

    .subtitle,
    .welcome,
    .widget-copy,
    .dashboard-card-head p,
    .panel-head p,
    .clay-bars span,
    .clay-bars strong,
    .recent-trip strong,
    [class*="-help"],
    [class*="-note"],
    [class*="-meta"] {
        font-size: var(--app-readable-detail) !important;
        line-height: 1.4;
    }

    th {
        letter-spacing: .035em !important;
    }

    .daily-chart {
        grid-template-columns: repeat(14, minmax(36px, 1fr)) !important;
    }
}

@media screen and (max-width: 680px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}