:root {
  --font-ui-caption: 10px;
  --font-ui-control: 10px;
  --font-ui-body: 12px;
  --font-ui-section: 16px;
}

/* Shared supporting text and compact controls. */
.login-card label,
.form-message,
.eyebrow,
.live-pill,
.date-chip,
.section-intro p,
.panel-head p,
.records-toolbar p,
.account-panel p,
.metric span,
.metric small,
.bar-wrap b,
.bar-wrap small,
.donut span,
.legend p,
.legend p b,
.panel-head > span,
.data-tab-heading > p,
.analytics-filters label,
.analytics-filters input,
.analytics-filters select,
.analytics-metrics span,
.photo-stat-grid span,
.photo-stat-grid small,
.filters a,
.filters .records-export-button,
.bulk-record-actions,
.records-message,
.delete-record-button,
.role-card span,
.role-card small,
.signout {
  font-size: var(--font-ui-caption) !important;
}

/* Configuration pages share one readable form scale. */
.config-head h3 {
  font-size: var(--font-ui-section);
}

.config-head > div > p:not(.eyebrow),
.config-actions span,
.config-actions button,
.area-config-title-actions > button,
.enable-switch,
.config-field > span,
.area-config-card legend,
.config-field input,
.category-checks label,
.config-message,
.temperature-group-editor > span,
.temperature-group-fields input,
.temperature-item-row > input,
.temperature-item-row label input,
.temperature-items-head strong,
.temperature-items-head button,
.temperature-item-row label:not(.enable-switch),
.temperature-group-editor .enable-switch,
.temperature-item-row .enable-switch,
.temperature-delete {
  font-size: var(--font-ui-control);
}

/* Edit dialogs use the same control size while record details remain 12px. */
.record-edit-grid label,
.record-edit-grid input,
.record-edit-grid textarea,
.record-edit-entries input,
.record-edit-entries h4,
.record-edit-entries label,
.record-edit-message,
.record-photo-list figcaption {
  font-size: var(--font-ui-control);
}

/* Work-log controls and actions follow the same hierarchy. */
.work-log-module > header > span,
.work-log-module header p,
.work-log-history span,
.work-log-history small,
.viewer-note,
.work-log-empty,
.work-log-new,
.work-log-action-message {
  font-size: var(--font-ui-caption);
}

.work-log-top-save,
.work-log-top-export,
.work-log-topbar #headerNewWorkLog {
  font-size: var(--font-ui-body);
  font-weight: 800;
}