html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--app-bg);
  color: var(--app-fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

:root {
  /* Timeline theme colors */
  --app-bg: #000000;
  --app-fg: #ffffff;
  --timeline-base: #5a5a5a;
  --timeline-highlight: #ffffff;
  --timeline-search: #e7d52e;
  --timeline-measure: #e7d52e;
}

:root.theme-dark {
  --app-bg: #000000;
  --app-fg: #ffffff;
  --timeline-base: #5a5a5a;
  --timeline-highlight: #ffffff;
  --timeline-search: #e7d52e;
  --timeline-measure: #e7d52e;
}

:root.theme-light {
  --app-bg: #ffffff;
  --app-fg: #000000;
  --timeline-base: #2c2c2c;
  --timeline-highlight: #000000;
  --timeline-search: #e7d52e;
  --timeline-measure: #e7d52e;
}

#timeline {
  display: block;
  width: 100vw;
  height: 100vh;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body.composition-mode {
  overflow: hidden;
}

body.composition-mode #timeline {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, width, height;
}

#date-controls {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--app-fg);
  background: var(--app-bg);
  padding: 6px 10px;
  z-index: 10;
  user-select: none;
  transition: opacity 0.3s ease;
}

#date-controls-fields {
  display: flex;
  gap: inherit;
  width: 100%;
  align-items: center;
}

#date-controls-toggle {
  display: none;
}

body.presentation-mode #date-controls,
body.composition-mode #date-controls {
  opacity: 0;
  pointer-events: auto;
}

body.presentation-mode #date-controls:hover,
body.composition-mode #date-controls:hover {
  opacity: 1;
}

#dataset-badge {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--timeline-base);
  background: var(--app-bg);
  padding: 6px 10px;
  z-index: 10;
  user-select: none;
  /* Match canvas label font stack and size */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

body.presentation-mode #dataset-badge,
body.composition-mode #dataset-badge {
  opacity: 0;
  pointer-events: auto;
}

body.presentation-mode #dataset-badge:hover,
body.composition-mode #dataset-badge:hover {
  opacity: 0.9;
}

#dataset-badge .ds-name {
  cursor: pointer;
  user-select: none;
}
#dataset-badge .ds-name:hover {
  color: var(--timeline-highlight);
}

#dataset-badge .ds-tag {
  cursor: pointer;
  user-select: none;
}
#dataset-badge .ds-tag:hover {
  color: var(--timeline-highlight);
}

#dataset-badge .ds-tag.active {
  text-decoration: underline;
}

#dataset-badge .help-trigger {
  cursor: pointer;
  user-select: none;
  margin-left: 8px;
}
#dataset-badge .help-trigger:hover {
  color: var(--timeline-highlight);
}

#loading-indicator {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-fg);
  background: rgba(0, 0, 0, 0.35);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 20;
  pointer-events: none;
}

#loading-indicator.hidden {
  display: none;
}

#date-controls .field {
  display: flex;
  align-items: center;
  gap: 6px;
}

#date-controls label {
  opacity: 0.9;
}

#date-controls input[type="number"] {
  width: 7ch;
  background: var(--app-bg);
  color: var(--app-fg);
  border: none;
  border-bottom: 1px solid var(--timeline-base);
  outline: none;
  padding: 2px 4px;
  font: inherit;
  text-align: right;
}

/* Month and Day are 2-digit fields; reduce their width
   Use higher specificity than the generic number input rule */
#date-controls #month-input,
#date-controls #day-input {
  width: 3ch;
}

#date-controls input[type="number"]:disabled {
  opacity: 0.4;
  border-bottom-color: rgba(51, 51, 51, 0.4);
}

#date-controls input[type="search"],
#date-controls input[type="text"] {
  width: 20ch;
  background: var(--app-bg);
  color: var(--app-fg);
  border: none;
  border-bottom: 1px solid var(--timeline-base);
  outline: none;
  padding: 2px 4px;
  font: inherit;
}

/* Hide native clear icons so we use our custom X */
#search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
#search-input::-ms-clear { display: none; width: 0; height: 0; }

#search-clear {
  background: var(--app-bg);
  color: var(--app-fg);
  opacity: 0.9; /* match labels */
  border: none;
  padding: 0 4px;
  font: inherit; /* same font and size as Y/M/D */
  cursor: pointer;
  line-height: inherit;
}
#search-clear:hover {
  color: var(--timeline-search);
  opacity: 1;
}

#date-controls .field.field-locale {
  margin-left: auto;
  flex: 0 0 auto;
}

#dataset-locale-toggle {
  min-width: 3ch;
  background: var(--app-bg);
  color: var(--app-fg);
  border: none;
  border-bottom: 1px solid var(--timeline-base);
  outline: none;
  padding: 2px 6px;
  font: inherit;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

#dataset-locale-toggle:hover {
  color: var(--timeline-search);
}

#mobile-menu-host {
  display: none;
}

/* Hide number spinners (purist style) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Simple dataset switcher menu */
#dataset-menu {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 48px; /* above the badge */
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 6px 8px;
  z-index: 20; /* above badge and controls */
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  line-height: 1.4;
}
#dataset-menu.hidden { display: none; }
#dataset-menu .ds-item {
  display: block;
  padding: 3px 2px;
  cursor: pointer;
  color: var(--app-fg);
  white-space: nowrap;
  text-align: center;
}
#dataset-menu .ds-item:hover {
  color: var(--timeline-search);
}

#locale-menu {
  position: fixed;
  top: 48px;
  right: 16px;
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 6px 8px;
  z-index: 21;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  line-height: 1.4;
}

#locale-menu.hidden {
  display: none;
}

#locale-menu .locale-item {
  display: block;
  padding: 3px 6px;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
}

#locale-menu .locale-item:hover {
  color: var(--timeline-search);
}

#locale-menu .locale-item.active {
  opacity: 0.55;
  cursor: default;
}

/* Help popup window (same style as dataset menu) */
#help-menu {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 48px;
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 6px 8px;
  z-index: 20;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  line-height: 1.4;
  max-width: 80vw;
}
#help-menu.hidden { display: none; }
#help-menu .ds-item { /* reuse same look */
  display: block;
  padding: 3px 2px;
  white-space: nowrap;
  color: var(--app-fg);
}
#help-menu .help-detail {
  color: var(--timeline-base);
}

/* Shortcut notification (bottom right, temporary) */
#shortcut-notification {
  position: fixed;
  bottom: 16px;
  right: 16px;
  color: var(--timeline-highlight);
  background: var(--app-bg);
  padding: 8px 12px;
  z-index: 15;
  user-select: none;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  border: 1px solid var(--timeline-base);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

#shortcut-notification.visible {
  opacity: 0.95;
}

#admin-mode-controls {
  position: fixed;
  top: 16px;
  left: 16px;
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 8px 10px;
  z-index: 24;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  min-width: 220px;
}
#admin-mode-controls .admin-panel-header {
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#admin-mode-controls .admin-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
#admin-mode-controls .admin-toggle:last-of-type {
  margin-bottom: 4px;
}
#admin-mode-controls .admin-toggle input[type="checkbox"] {
  margin: 0;
}
#admin-mode-controls .admin-hint {
  font-size: 11px;
  color: var(--timeline-base);
}
#admin-mode-controls .admin-hint code {
  color: var(--timeline-highlight);
}

#composition-settings {
  position: fixed;
  top: 16px;
  right: 16px;
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 8px 10px;
  z-index: 20;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  max-width: 280px;
}
#composition-settings.hidden {
  display: none;
}
#composition-settings .composition-panel-header {
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#composition-settings .composition-section {
  margin-bottom: 10px;
}
#composition-settings .composition-section:last-of-type {
  margin-bottom: 0;
}
#composition-settings .composition-section-title {
  font-weight: 600;
  margin-bottom: 6px;
}
#composition-settings .composition-time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
#composition-settings .composition-time button {
  padding: 4px 6px;
}
#composition-settings .composition-time input[type="text"] {
  width: 100%;
  min-width: 0;
}
#composition-settings .composition-inline-sep {
  color: var(--timeline-base);
  text-transform: lowercase;
}
#composition-settings .composition-physical-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
}
#composition-settings .composition-inline-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
#composition-settings .composition-inline-field {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
#composition-settings .composition-inline-field span {
  font-weight: 500;
  color: var(--timeline-base);
}
#composition-settings .composition-inline-field input[type="number"] {
  width: 76px;
  text-align: right;
}
#composition-settings .composition-inline-fields-sheet {
  flex-wrap: nowrap;
  gap: 6px;
}
#composition-settings .composition-inline-fields-sheet .composition-inline-field input[type="number"] {
  width: 40px;
}
#composition-settings .composition-inline-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
#composition-settings .composition-inline-label {
  font-weight: 600;
}
#composition-settings .composition-inline-setting input[type="number"] {
  width: 88px;
  text-align: right;
}
#composition-settings .composition-toggle-setting {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
#composition-settings .composition-toggle-setting input[type="checkbox"] {
  margin: 0;
}
#composition-settings label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#composition-settings input[type="number"] {
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 2px 4px;
  font: inherit;
}
#composition-settings input[type="text"] {
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 2px 4px;
  font: inherit;
}
#composition-settings select {
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 2px 4px;
  font: inherit;
}
#composition-settings .composition-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 6px;
}
#composition-settings .composition-presets-label {
  font-weight: 500;
  margin-right: 4px;
}
#composition-settings .composition-presets button,
#composition-settings .composition-actions button,
#composition-settings .composition-theme button {
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 2px 6px;
  font: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}
#composition-settings .composition-presets input[type="text"],
#composition-settings .composition-presets select {
  flex: 1 1 140px;
  min-width: 120px;
}
#composition-settings .composition-presets-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}
#composition-settings .composition-presets-actions button {
  background: var(--app-bg);
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  padding: 2px 6px;
  font: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}
#composition-settings .composition-presets button:hover,
#composition-settings .composition-presets-actions button:hover,
#composition-settings .composition-actions button:hover,
#composition-settings .composition-theme button:hover {
  color: var(--timeline-highlight);
  border-color: var(--timeline-highlight);
}
#composition-settings .composition-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
#composition-settings .composition-actions-left {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
#composition-settings .composition-actions-left button {
  width: 100%;
}
#composition-settings .composition-print-layout {
  background: #143d24;
  border-color: #2ea043;
  color: #b6f2c2;
}
#composition-settings .composition-print-layout:hover {
  background: #1a4b2b;
  border-color: #3bd45b;
  color: #e2ffe8;
}
#composition-settings .composition-pan-readout {
  text-align: center;
  font-size: 11px;
  color: var(--timeline-base);
}
#composition-settings .composition-content-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}
#composition-settings .composition-content-scale button {
  width: 100%;
}
#composition-settings .composition-content-scale-value {
  text-align: center;
  font-size: 12px;
  color: var(--timeline-base);
}
#composition-settings .composition-theme {
  display: flex;
}
#composition-settings .composition-theme button {
  width: 100%;
}
#composition-settings .composition-derived {
  font-size: 11px;
  color: var(--timeline-base);
  margin-top: 4px;
}
#composition-settings .composition-scale {
  margin-top: 8px;
  font-weight: 500;
  font-size: 11px;
  color: var(--timeline-base);
}
#composition-settings .composition-presets-info {
  margin-top: 4px;
  font-size: 11px;
  color: var(--timeline-base);
}
#composition-settings .composition-hidden {
  margin-top: 4px;
  font-size: 11px;
  color: var(--timeline-base);
}
#composition-settings .composition-hidden.has-hidden {
  color: var(--timeline-highlight);
}
#composition-settings .composition-hidden.clickable {
  cursor: pointer;
  text-decoration: underline;
}
#composition-settings .composition-hidden.revealed {
  font-weight: 600;
}

#mobile-landing-splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.2s ease;
}

#mobile-landing-splash.hidden {
  opacity: 0;
}

#mobile-landing-splash .mobile-landing-splash-text {
  font-size: 22px;
  line-height: 1.3;
  color: var(--app-fg);
  border: 1px solid var(--timeline-base);
  background: rgba(0, 0, 0, 0.55);
  padding: 12px 14px;
  border-radius: 10px;
  max-width: min(88vw, 360px);
  white-space: pre-line;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

@media (max-width: 768px), (pointer: coarse) {
  body {
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    --mobile-ui-font-size: 16px;
    --mobile-ui-font-size-large: 18px;
    --mobile-ui-control-height: 40px;
  }

  body.mobile-chrome {
    --mobile-ui-font-size: 17px;
    --mobile-ui-font-size-large: 19px;
    --mobile-ui-control-height: 40px;
  }

  body.mobile-safari {
    --mobile-ui-font-size: 15px;
    --mobile-ui-font-size-large: 17px;
    --mobile-ui-control-height: 38px;
  }

  body.mobile-panel-open {
    overflow: hidden;
  }

  body.mobile-panel-open #timeline {
    pointer-events: none;
    touch-action: none;
  }

  #timeline {
    touch-action: none;
  }

  #date-controls {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    transform: none;
    width: auto;
    top: calc(8px + env(safe-area-inset-top));
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 8px 10px;
    pointer-events: auto;
    opacity: 1;
    justify-content: flex-start;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  }

  #date-controls-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--mobile-ui-control-height);
    margin: 0;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--app-fg);
    font: inherit;
    font-size: var(--mobile-ui-font-size-large);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1;
    cursor: pointer;
  }

  #date-controls-fields {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.18s ease, opacity 0.18s ease;
    pointer-events: none;
  }

  #date-controls.mobile-controls-open #date-controls-fields {
    max-height: 80vh;
    opacity: 1;
    pointer-events: auto;
  }

  #date-controls .field {
    min-width: 0;
    flex: 1 1 16%;
    align-items: stretch;
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
  }

  #date-controls .field.field-search {
    flex: 1 1 100%;
    width: 100%;
  }

  #date-controls .field.field-locale {
    flex: 0 0 auto;
    width: auto;
    align-self: flex-end;
    margin-left: 0;
  }

  #date-controls:not(.mobile-controls-open) .field {
    display: none;
  }

  #date-controls label {
    display: none;
  }

  #date-controls input[type="number"],
  #date-controls input[type="search"],
  #date-controls input[type="text"] {
    width: 100%;
    min-width: 0;
    height: var(--mobile-ui-control-height);
    padding: 6px 8px;
    font-size: var(--mobile-ui-font-size);
    border: 1px solid var(--timeline-base);
    box-sizing: border-box;
  }

  #date-controls #month-input,
  #date-controls #day-input {
    width: 100%;
  }

  #search-clear {
    height: var(--mobile-ui-control-height);
    width: 36px;
    transition: opacity 0.15s ease;
  }

  #date-controls .field.field-search #search-clear {
    display: none;
  }

  #dataset-locale-toggle {
    height: var(--mobile-ui-control-height);
    min-width: 56px;
    border: 1px solid var(--timeline-base);
    box-sizing: border-box;
    font-size: var(--mobile-ui-font-size);
  }

  #search-clear:active {
    opacity: 0.65;
  }

  #mobile-menu-host {
    display: none;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
  }

  #date-controls.mobile-controls-open #mobile-menu-host {
    display: flex;
  }

  #dataset-badge {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    transform: none;
    width: auto;
    bottom: auto;
    padding: 8px 10px;
    font-size: var(--mobile-ui-font-size);
    box-sizing: border-box;
  }

  #mobile-menu-host #dataset-badge {
    position: static;
    width: 100%;
    left: auto;
    right: auto;
    border: 1px solid var(--timeline-base);
    border-radius: 6px;
    background: var(--app-bg);
  }

  #dataset-menu,
  #help-menu {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: none;
    top: auto;
    bottom: auto;
    max-height: min(50vh, 360px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, max-height 0.2s ease;
    overflow: auto;
    display: block;
    border-radius: 6px;
    max-width: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    background: var(--app-bg);
    min-height: 0;
    display: block;
  }

  #dataset-menu .ds-item,
  #help-menu .ds-item {
    padding: 12px 8px;
    min-height: 38px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 1.3;
  }

  #dataset-menu:not(.hidden),
  #help-menu:not(.hidden) {
    max-height: min(50vh, 360px);
    opacity: 1;
    pointer-events: auto;
  }

  #dataset-menu.hidden,
  #help-menu.hidden {
    display: block;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }

  #locale-menu {
    max-height: min(50vh, 360px);
    overflow: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    font-size: var(--mobile-ui-font-size);
  }

  #locale-menu .locale-item {
    padding: 10px 8px;
    min-height: 36px;
    font-size: var(--mobile-ui-font-size-large);
    line-height: 1.2;
  }

  #mobile-menu-host #dataset-menu,
  #mobile-menu-host #help-menu {
    margin-top: 6px;
    width: 100%;
    border: 1px solid var(--timeline-base);
    transform: none;
    max-height: min(50vh, 360px);
    transform-origin: center top;
    border-radius: 8px;
  }

  #mobile-menu-host #dataset-menu .ds-item,
  #mobile-menu-host #help-menu .ds-item {
    white-space: normal;
  }

  #dataset-menu .ds-item:active,
  #help-menu .ds-item:active,
  #dataset-badge .ds-tag:active,
  #dataset-badge .ds-name:active,
  #dataset-badge .help-trigger:active {
    opacity: 0.65;
  }

  #dataset-badge .ds-tag {
    display: inline-block;
    padding: 2px 6px;
    margin: 0 2px 2px;
  }

  #dataset-badge .ds-tag,
  #dataset-badge .ds-counts {
    display: none !important;
  }

  #dataset-menu .ds-item:hover,
  #help-menu .ds-item:hover {
    color: var(--timeline-search);
  }

  #shortcut-notification {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    max-width: none;
    width: auto;
    text-align: center;
    font-size: 14px;
    bottom: calc(58px + env(safe-area-inset-bottom));
  }

  #search-clear {
    font-size: var(--mobile-ui-font-size-large);
  }

  #search-clear,
  #date-controls-toggle {
    min-height: var(--mobile-ui-control-height);
    font-size: var(--mobile-ui-font-size-large);
  }

  #dataset-badge,
  #date-controls {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  }

  #dataset-menu,
  #help-menu,
  #date-controls {
    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease;
  }

  #date-controls input[type="number"]:focus-visible,
  #date-controls input[type="search"]:focus-visible,
  #date-controls input[type="text"]:focus-visible,
  #search-clear:focus-visible,
  #dataset-menu .ds-item:focus-visible,
  #help-menu .ds-item:focus-visible,
  #dataset-badge .ds-name:focus-visible,
  #dataset-badge .help-trigger:focus-visible,
  #dataset-badge .ds-tag:focus-visible {
    outline: 1px solid var(--timeline-search);
    outline-offset: 1px;
  }
}