/* Touch controls share the app's existing surfaces and borders. */
.wheel-interaction { min-width: 0; }
.wheel-zoom-controls, .wheel-touch-hint, .wheel-competency-select, .wheel-touch-detail { display: none; }
[data-wheel-pick] { display: none; }

@media screen and (max-width: 1000px), screen and (pointer: coarse) {
  .wheel-zoom-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .wheel-zoom-button, .wheel-competency-select {
    min-width: 44px; min-height: 44px; padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--divider, var(--border)); background: var(--card); color: var(--white); font: inherit;
  }
  .wheel-zoom-button:last-child { margin-left: auto; }
  .wheel-zoom-button:disabled { opacity: .4; cursor: default; }
  .wheel-zoom-button:focus-visible, .wheel-competency-select:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  .wheel-zoom-value { min-width: 44px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
  .wheel-touch-hint { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
  .interactive-wheel { touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden; }
  .interactive-wheel.is-zoomed { touch-action: none; cursor: grab; }
  .interactive-wheel.is-zoomed:active { cursor: grabbing; }
  .interactive-wheel [data-wheel-pick] { display: inline; }
  .wheel-competency-select { display: block; width: 100%; min-width: 0; font-size: 16px; margin-top: 12px; }
  .wheel-touch-detail:not([hidden]) { display: block; margin-top: 12px; padding: 14px; border: 1px solid var(--divider, var(--border)); border-radius: 10px; }
  .wheel-touch-detail > strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
  .wheel-touch-values { margin-top: 10px; font-size: 13px; }
  .wheel-touch-values > div { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; }
  .wheel-touch-values dt { color: var(--muted); overflow-wrap: anywhere; }
  .wheel-touch-values dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #report-wheel-tip, #wheel-tooltip, .report-hover-hint { display: none !important; }
  .pillar-mini::after {
    position: static; display: block; transform: none; white-space: normal;
    opacity: 1; margin-top: 8px; padding: 0; border: 0; background: none;
    font-size: 10px; line-height: 1.5;
  }
  .r-wheel-btn, .wheel-toggle, .calibration-save-btn, .calibration-reset-btn,
  .report-wheel-focus-clear, .wheel-focus-clear, .report-link-btn, .cycle-open,
  .roster-status-filter button, .filter-trigger, .filter-reset { min-height: 44px; }
  .r-wheel-btn, .wheel-toggle { padding: 9px 12px; }
  .calibration-editor-input { height: 44px; font-size: 16px; }
  input[type='search'], input[type='date'], .filter-search-input { min-height: 44px; font-size: 16px; }
  .report-wheel-layout, .dashboard-wheel-layout, .history-wheel-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .report-wheel-header, .dashboard-wheel-header { flex-wrap: wrap; gap: 12px; }
  .report-wheel-controls { flex-wrap: wrap; }
  .dashboard-wheel-aside, .report-wheel-aside { padding-top: 0 !important; }
  .cluster-narratives-header { min-height: 44px; }
}

@media screen and (min-width: 681px) and (max-width: 1000px) {
  .filters-bar { top: 116px; }
}

@media screen and (max-width: 680px) {
  /* Keep filters available near the top without covering half the phone. */
  .filters-bar { position: relative; top: 0; }
  .topbar-brand, .topbar .brand { min-width: 0; flex: 1 1 auto !important; line-height: 1.25 !important; }
  .topbar-actions { margin-left: 8px; }
  .topbar-action-btn { min-width: 44px; min-height: 44px; padding: 8px; }
  .report-wheel-card, .chart-card { min-width: 0; }
  .report-wheel-controls { gap: 6px; }
  .summary-heading { flex-wrap: wrap; }
  .summary-heading-label { min-width: 0; }
  .report-wheel-focus:not([hidden]), .wheel-focus:not([hidden]) { flex-wrap: wrap; }
  .heatmap-wrap, .calibration-table-wrap, .cmp-table-wrap, .level-card-body { overscroll-behavior-x: contain; }
}

@media print {
  .wheel-interaction { display: contents; }
  .wheel-zoom-controls, .wheel-touch-hint, .wheel-competency-select, .wheel-touch-detail { display: none !important; }
  [data-wheel-pick] { display: none; }
}