:root {
  --font-body: 'Inter', sans-serif;
  --font-num: 'Inter', sans-serif;
  --font-num-features: "zero" 1, "tnum" 1, "cv05" 1, "cv08" 1;
}

html.font-inter { --font-body: 'Inter', sans-serif; }
html.font-atkinson { --font-body: 'Atkinson Hyperlegible Next', sans-serif; }
html.font-plex { --font-body: 'IBM Plex Sans', sans-serif; }

html.text-larger { font-size: 112.5%; }
html.text-largest { font-size: 125%; }

body {
  font-family: var(--font-body);
}
html.font-inter body { font-family: 'Inter', sans-serif; }
html.font-atkinson body { font-family: 'Atkinson Hyperlegible Next', sans-serif; }
html.font-plex body { font-family: 'IBM Plex Sans', sans-serif; }

html.font-inter:not(.look-legacy) body {
  font-feature-settings: "cv05" 1, "cv08" 1;
}

.td-order,
.td-time,
.po-number,
.po-chip,
.po-review-chip,
.po-add,
.po-mono,
.po-pop-skids,
.po-count-input,
.ticker-item,
.live-board-count,
.date-input,
.date-picker-btn,
.audit-time,
.header-clock,
.kiosk-clock,
.kiosk-date,
.clock-hms {
  font-family: var(--font-num), sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-num-features);
}

html:not(.look-legacy) .header-clock {
  font-family: var(--font-num), sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text);
  text-shadow: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-num-features);
}
html:not(.look-legacy) .header-clock-time,
html:not(.look-legacy) .clock-hms {
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-num-features);
  display: inline-block;
  min-width: 8ch;
  text-align: left;
}
html:not(.look-legacy) .header-clock-time {
  min-width: 11ch;
}
html:not(.look-legacy) #clock-tz-label,
html:not(.look-legacy) #hdate {
  display: none;
}
html:not(.look-legacy) .header-clock__weekday {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--muted);
  letter-spacing: 0;
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

@media (max-width: 768px) {
  html:not(.look-legacy) .header-clock,
  html:not(.look-legacy) .header-clock-time {
    font-size: 1.125rem;
  }
  html:not(.look-legacy) .header-clock__weekday,
  html:not(.look-legacy) .header-clock__date {
    display: none;
  }
}

html:not(.look-legacy) .kiosk-header {
  height: auto;
  min-height: 72px;
}
html:not(.look-legacy) .kiosk-clock {
  font-family: var(--font-num), sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  color: var(--text);
  text-shadow: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-num-features);
}
html:not(.look-legacy) .kiosk-clock .clock-hms {
  font-size: 1em;
  font-weight: 700;
  min-width: 8ch;
}
html:not(.look-legacy) .kiosk-clock .clock-meridiem {
  font-size: 40%;
  font-weight: 600;
  display: inline-block;
  min-width: 2.6em;
  margin-left: 0.15em;
  font-variant-numeric: tabular-nums;
}
html:not(.look-legacy) .kiosk-date {
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
html:not(.look-legacy) #kiosk-tz-label {
  display: none;
}
html:not(.look-legacy) #multi-kiosk-clock.kiosk-clock {
  font-size: 6rem;
}

@media (max-width: 768px) {
  html:not(.look-legacy) .kiosk-clock,
  html:not(.look-legacy) #multi-kiosk-clock.kiosk-clock {
    font-size: 2.5rem;
  }
  html:not(.look-legacy) .kiosk-date {
    font-size: 0.85rem;
  }
}

html.look-legacy {
  --font-num: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
  --font-num-features: "tnum" 1;
  font-size: 100%;
}
html.look-legacy.text-larger { font-size: 112.5%; }
html.look-legacy.text-largest { font-size: 125%; }
html.look-legacy .header-clock {
  font-family: var(--font-num), monospace;
  font-weight: 400;
  font-size: inherit;
  color: var(--accent2);
}

html.text-bold body {
  font-weight: 600;
}
html.text-bold body .td-door,
html.text-bold body .td-order,
html.text-bold body .td-order .po-line,
html.text-bold body .td-skids,
html.text-bold body .po-number,
html.text-bold body .po-door,
html.text-bold body .live-board-count,
html.text-bold body .stat-card .s-value,
html.text-bold body .kiosk-door-label,
html.text-bold body .kiosk-tile-value,
html.text-bold body .mk-door-name,
html.text-bold body .mk-skids-num {
  font-weight: 800;
}

#site-display-prefs-card .filter-chip,
#user-display-prefs-card .filter-chip {
  min-height: 44px;
  min-width: 44px;
}