/* Shared readable type scale.
   This file is loaded last and changes font sizing only. */
:root {
  --ui-type-body: 14px;
  --ui-type-label: 14px;
  --ui-type-caption: 14px;
  --ui-type-control: 14px;
  --ui-type-card-title: 18px;
  --ui-type-section-title: 21px;
  --ui-type-page-title: clamp(25px, 1.65vw, 30px);
}

body {
  font-size: var(--ui-type-body) !important;
}

/* Shared navigation sits outside the application page roots. */
#sidebar .sidebar-nav-item,
#sidebar .sidebar-item-label,
#sidebar .sidebar-subnav-item,
.config-sidebar a,
.config-sidebar button,
.config-sidebar .sidebar-item-label,
.config-sidebar .sidebar-subnav-item {
  font-size: var(--ui-type-body) !important;
}

/* Main authenticated application, including Planning. */
#app {
  font-size: var(--ui-type-body) !important;
}

#app :where(
  p,
  li,
  div,
  td,
  label,
  span,
  strong,
  a,
  button,
  input,
  select,
  textarea
) {
  font-size: var(--ui-type-body) !important;
}

#app :where(
  th,
  small,
  .planning-secondary,
  .planning-field > span,
  .planning-help,
  .planning-form-error,
  .planning-table-footer,
  .profile-copy small,
  .sidebar-eyebrow,
  .overview-kicker,
  .report-section-title,
  .report-source-copy small,
  .report-source-meta,
  .assignment-meta,
  .planner-vehicle-meta,
  .shift-settings-note,
  .report-loading-details
) {
  font-size: var(--ui-type-label) !important;
}

#app :where(
  .planning-status,
  .live-badge,
  .report-source-count,
  .badge-count,
  .assignment-vehicle-count
) {
  font-size: var(--ui-type-caption) !important;
}

#app :where(
  .planning-heading h1
) {
  font-size: var(--ui-type-page-title) !important;
}

#app .geozone-kpi-card span {
  font-size: 16px !important;
  font-weight: 600;
}

#app .geozone-kpi-card strong {
  font-size: 24px !important;
}

#app :where(
  .map-section-heading h2,
  .planning-drawer-header h2
) {
  font-size: var(--ui-type-section-title) !important;
}

#app :where(
  .profile-copy strong,
  .planning-table td,
  .planning-check,
  .planning-tabs button
) {
  font-size: var(--ui-type-control) !important;
}

#app #header :where(
  input,
  button
) {
  font-size: var(--ui-type-control) !important;
}

#app :where(
  .planning-toolbar input,
  .planning-toolbar button,
  .planning-toolbar .ka-select-value
) {
  font-size: var(--ui-type-label) !important;
}

/* Administration and auto-report configuration pages. */
.access-page,
.pw {
  font-size: var(--ui-type-body) !important;
}

.access-page :where(
  p,
  li,
  div,
  td,
  label,
  span,
  strong,
  a,
  button,
  input,
  select,
  textarea,
  .access-login,
  .access-note,
  .access-expires
),
.pw :where(
  p,
  li,
  div,
  td,
  label,
  strong,
  a,
  button,
  input,
  select,
  textarea,
  span
),
#hdr :where(
  button,
  input,
  strong,
  span
) {
  font-size: var(--ui-type-body) !important;
}

.access-page :where(
  th,
  small,
  .access-kicker,
  .access-status,
  .access-card-heading p,
  .access-form label > span,
  .access-table-heading
),
.pw :where(
  th,
  small,
  .toolbar-sub,
  .client-meta,
  .report-meta,
  .fl,
  .sec-label,
  .fi-label,
  .vtbl th
),
#hdr :where(
  small,
  .config-header-copy small,
  .access-header-copy small
) {
  font-size: var(--ui-type-label) !important;
}

.access-title-row h1,
.toolbar-title {
  font-size: var(--ui-type-page-title) !important;
}

.access-card-heading h2 {
  font-size: var(--ui-type-card-title) !important;
}

/* Presentation/demo page: keep marketing headings expressive, but remove
   unreadable micro-copy from cards, diagrams, tables, and controls. */
.section :where(
  p,
  li,
  div,
  td,
  label,
  span,
  strong,
  a,
  button,
  input,
  select,
  textarea,
  .btn,
  .step-card p,
  .feat-card p,
  .rtype-card p,
  .spec-card li,
  .pd-vehicle-name,
  .flow-node .fn-name
) {
  font-size: var(--ui-type-body) !important;
}

.section :where(
  th,
  small,
  .label,
  .stat .lbl,
  .pill,
  .badge,
  .rd-type,
  .rd-filter,
  .pd-chip,
  .pd-tab,
  .pd-vehicle-meta,
  .flow-node .fn-label,
  .spec-card .check
) {
  font-size: var(--ui-type-label) !important;
}

.section :where(
  button,
  input,
  select,
  textarea
) {
  font-size: var(--ui-type-control) !important;
}

body > nav :where(a, button),
body > header :where(a, button, span, strong, small),
footer {
  font-size: var(--ui-type-body) !important;
}

body #cta .btn-white,
body #cta .btn-outline-white,
body footer .footer-logo {
  font-size: var(--ui-type-body) !important;
}

#hero :where(
  p,
  a,
  button,
  .label,
  .stat .lbl
) {
  font-size: var(--ui-type-body) !important;
}

#hero .hero-visual :where(
  div,
  span
) {
  font-size: var(--ui-type-body) !important;
}

footer :where(
  p,
  span,
  a,
  small,
  li
) {
  font-size: var(--ui-type-label) !important;
}

/* Login already uses a deliberately larger control size. Keep that hierarchy
   while aligning its supporting copy to the shared readable minimum. */
#login-screen {
  font-size: var(--ui-type-body) !important;
}

#login-screen :where(
  .field-error,
  .caps-lock-warning,
  .login-form-error,
  .login-support,
  .login-footer,
  .password-toggle
) {
  font-size: var(--ui-type-label) !important;
}

#login-screen :where(
  input[type="text"],
  input[type="password"]
) {
  font-size: 16px !important;
}

@media (max-width: 680px) {
  :root {
    --ui-type-body: 14px;
    --ui-type-label: 14px;
    --ui-type-caption: 14px;
    --ui-type-control: 14px;
    --ui-type-card-title: 18px;
    --ui-type-section-title: 20px;
    --ui-type-page-title: 25px;
  }
}