/* Shared sizing keeps filters, display tools and trajectory controls aligned. */
:root {
  --pec-control-height: 32px;
  --pec-control-radius: 4px;
  --pec-control-border: #c8d0d8;
  --pec-control-font: 13px;
  --pec-label-font: 12px;
}
body { font-family: Arial, Helvetica, sans-serif; color: #26323c; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: auto; }
.app-header { padding-top: 8px; padding-bottom: 8px; }
.app-description, .app-link, .main-tabs > li > a { color: #3b3b3b; font-size: 13px; }
.app-link { font-weight: 400; }
.main-tabs > li > a { padding: 9px 12px; white-space: nowrap; }
#igv-controls-panel { padding: 8px 24px; }
#igv-controls-panel .browser-toolbar { gap: 12px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #e5e9ed; }
#igv-controls-panel .selection-count { color: #444; padding: 0; font-size: 12px; font-weight: 500; white-space: nowrap; }
#igv-controls-panel .browser-actions { gap: 5px; }
#igv-controls-panel .browser-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: var(--pec-control-height); padding: 5px 9px; border-color: var(--pec-control-border); border-radius: var(--pec-control-radius); font-size: var(--pec-control-font); font-weight: 400; line-height: 20px; }
#igv-controls-panel button, #igv-controls-panel input, #igv-controls-panel select { font-family: inherit; }
#igv-controls-panel .browser-actions .btn-primary { color: white; background: #245580; border-color: #245580; }
#igv-controls-panel .browser-filter-grid { grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: end; }
#igv-controls-panel .track-selection-fields { display: grid; grid-template-columns: 96px 172px minmax(160px,1.3fr) minmax(160px,1fr); gap: 14px; align-items: end; min-width: 0; }
#igv-controls-panel .filter-label { color: #46515b; font-size: var(--pec-label-font); font-weight: 600; line-height: 16px; margin-bottom: 4px; letter-spacing: 0; }
#igv-controls-panel .pill-filter .bootstrap-select { display: none !important; }
#igv-controls-panel .selection-pills { display: flex; gap: 5px; min-height: var(--pec-control-height); }
#igv-controls-panel .selection-pills button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: var(--pec-control-height); padding: 5px 8px; border: 1px solid var(--pec-control-border); border-radius: var(--pec-control-radius); background: #fff; color: #26323c; font-size: var(--pec-control-font); font-weight: 400; line-height: 20px; white-space: nowrap; }
#igv-controls-panel .selection-pills button::before { content: ""; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid #8b99a5; border-radius: 2px; background: #fff; }
#igv-controls-panel .selection-pills button:hover { border-color: #8b99a5; background: #f5f7f9; }
#igv-controls-panel .selection-pills button[aria-pressed="true"] { color: #26323c; border-color: #a6b3bf; background: #edf1f5; }
#igv-controls-panel .selection-pills button[aria-pressed="true"]::before { content: "✓"; color: #fff; font-size: 10px; line-height: 1; background: #465c70; border-color: #465c70; }
#igv-controls-panel .filter-field .bootstrap-select > .dropdown-toggle { height: var(--pec-control-height); min-height: var(--pec-control-height); padding: 5px 25px 5px 8px; border-color: var(--pec-control-border); border-radius: var(--pec-control-radius); color: #26323c; font-size: var(--pec-control-font); line-height: 20px; }
#igv-controls-panel .controls-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 28px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5e9ed; }
#igv-controls-panel .signal-selection-row { display: flex; align-items: center; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; }
#igv-controls-panel .selected-signal-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; min-width: 0; max-width: 100%; }
#igv-controls-panel .signal-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; min-height: 26px; padding: 3px 7px; border: 1px solid #d9e2ea; border-radius: var(--pec-control-radius); background: #f5f7f9; color: #344250; font-size: 12px; line-height: 18px; }
#igv-controls-panel .modality-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#igv-controls-panel .signal-chip:hover { border-color: #94b3ca; background: #edf5fc; }
#igv-controls-panel .signal-chip .chip-remove { flex: 0 0 auto; color: #404040; font-size: 14px; line-height: 14px; }
#igv-controls-panel .empty-signals { font-size: 12px; color: #404040; }
#igv-controls-panel .selection-note { color: #795317; font-size: 13px; line-height: 1.4; background: #fff8e8; border-left: 3px solid #e4ba65; padding: 5px 8px; margin: 6px 0 0; }
#igv-controls-panel .selection-note[hidden] { display: none; }
#igv-controls-panel .toolbar-label { color: #333; font-size: 12px; letter-spacing: 0; }
#igv-controls-panel .track-display-tools { display: grid; grid-template-columns: calc(2 * var(--pec-control-height) + 4px) 110px 162px; gap: 10px; align-items: end; padding-left: 18px; border-left: 1px solid #dce2e7; min-width: 0; }
#igv-controls-panel .track-size-control { flex-wrap: nowrap; gap: 4px; white-space: nowrap; }
#igv-controls-panel .track-size-control .btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--pec-control-height); width: var(--pec-control-height); height: var(--pec-control-height); min-height: var(--pec-control-height); padding: 0; border-color: var(--pec-control-border); border-radius: var(--pec-control-radius); font-size: 16px; font-weight: 400; line-height: 20px; }
#igv-controls-panel .color-control .bootstrap-select { width: 100% !important; min-width: 0 !important; }
#igv-controls-panel .annotation-control { position: relative; font-size: 12px; color: #202020; }
#igv-controls-panel .annotation-control summary { display: flex; align-items: center; gap: 4px; cursor: pointer; min-height: var(--pec-control-height); padding: 5px 8px; border: 1px solid var(--pec-control-border); border-radius: var(--pec-control-radius); background: #fff; font-size: var(--pec-control-font); line-height: 20px; white-space: nowrap; list-style: none; }
#igv-controls-panel .annotation-control summary::-webkit-details-marker { display: none; }
#igv-controls-panel .annotation-control summary:hover { border-color: #8b99a5; background: #f5f7f9; }
#igv-controls-panel .annotation-control summary::after { content: "▾"; margin-left: auto; font-size: 10px; }
#igv-controls-panel .annotation-control[open] summary { border-color: #94b3ca; }
#igv-controls-panel .annotation-picker { position: absolute; right: 0; top: calc(100% + 4px); width: 290px; padding: 10px; border: 1px solid var(--pec-control-border); background: white; border-radius: var(--pec-control-radius); box-shadow: 0 6px 18px #1425371c; z-index: 1050; }
#igv-controls-panel .annotation-control:not([open]) .annotation-picker { display: none; }
#igv-controls-panel .track-load-status { display: inline-flex; align-items: center; margin-left: auto; min-height: 26px; padding: 3px 6px; border-radius: var(--pec-control-radius); font-size: 12px; line-height: 18px; }
#igv-controls-panel button:focus-visible, #igv-controls-panel summary:focus-visible { outline: 2px solid #4988bb; outline-offset: 2px; }
#igv-controls-panel button:disabled { opacity: .55; cursor: wait; }
#igv-controls-panel #retry-track-load { min-height: var(--pec-control-height); padding: 5px 8px; border-radius: var(--pec-control-radius); font-size: var(--pec-control-font); font-weight: 400; }
#igv-controls-panel #retry-track-load[hidden] { display: none; }
#trajectory-status { margin: 8px 0; color: #52606c; font-size: 13px; }
#trajectory-status:empty { display: none; }
/* Fixed menus are sized to the viewport by fitTrackMenus. */
#igv-controls-panel .dropdown-menu { max-height: 410px !important; padding: 5px; border-color: var(--pec-control-border); border-radius: var(--pec-control-radius); }
#igv-controls-panel .dropdown-header { color: #202020; font-size: 13px; font-weight: 600; padding: 8px 9px 4px; }
#igv-controls-panel .dropdown-menu > li > a { color: #26323c; font-size: var(--pec-control-font); line-height: 20px; padding: 6px 10px; white-space: normal; }
#igv-controls-panel .dropdown-menu > li.selected > a { color: #26323c; background: #edf1f5; }
#igv-controls-panel .dropdown-menu > li > a:hover,
#igv-controls-panel .dropdown-menu > li > a:focus { color: #111; background: #e2e8ee; }
#igv-controls-panel .bs-searchbox { padding: 5px; }
#igv-controls-panel .bs-searchbox input { height: var(--pec-control-height); font-size: var(--pec-control-font); border-radius: var(--pec-control-radius); box-shadow: none; }
#igv-controls-panel .bs-actionsbox .btn { min-height: var(--pec-control-height); padding: 5px 8px; font-size: var(--pec-control-font); font-weight: 400; }
#igv-controls-panel .bootstrap-select > .dropdown-menu { position: fixed; z-index: 1100; min-height: 0 !important; max-height: var(--track-menu-height,calc(100dvh - 16px)) !important; overflow: hidden !important; box-shadow: 0 3px 8px #0003; }
#igv-controls-panel .bootstrap-select > .dropdown-menu > .inner { min-height: 0 !important; max-height: var(--track-menu-inner-height,300px) !important; overflow-y: auto !important; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
#igv-controls-panel .dropdown-menu .popover-title { color: #202020; font-size: 14px; }
#igv-controls-panel .dropdown-menu .popover-title .close { color: #222; opacity: .8; }
/* The second workspace follows the same type scale and control geometry. */
.trajectory-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 12px 14px; border-radius: var(--pec-control-radius); }
.trajectory-control-group { width: auto; flex: 0 1 auto; gap: 4px; }
.trajectory-control-group:first-child { flex: 1 1 220px; }
.trajectory-control-label { margin: 0; font-size: var(--pec-label-font); font-weight: 600; line-height: 16px; letter-spacing: 0; color: #46515b; }
#trajectory-gene { min-width: 0; max-width: none; height: var(--pec-control-height); padding: 5px 9px; border-color: var(--pec-control-border); border-radius: var(--pec-control-radius); font-size: var(--pec-control-font); line-height: 20px; }
.trajectory-scale-options, .trajectory-legend { min-height: var(--pec-control-height); padding: 2px; gap: 2px; border-color: var(--pec-control-border); border-radius: var(--pec-control-radius); background: #f5f7f9; font-size: var(--pec-control-font); }
.trajectory-scale-options label, .trajectory-legend-item { display: inline-flex; align-items: center; min-height: calc(var(--pec-control-height) - 6px); padding: 2px 7px; border-radius: 2px; font-size: var(--pec-control-font); font-weight: 400; line-height: 20px; }
.trajectory-scale-options label:has(input:checked), .trajectory-legend-item:has(input:checked) { border-color: #c8d0d8; box-shadow: none; }
.trajectory-actions { width: auto; flex-wrap: wrap; min-height: var(--pec-control-height); }
.trajectory-actions .btn { width: auto; height: var(--pec-control-height); min-height: var(--pec-control-height); padding: 5px 9px; border-radius: var(--pec-control-radius); font-size: var(--pec-control-font); font-weight: 400; line-height: 20px; }
#trajectory-plot-btn, #trajectory-download-png { width: auto; }
.trajectory-plot-frame { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--pec-control-border); border-radius: var(--pec-control-radius); background: #fff; }
.trajectory-plot-frame:focus-visible { outline: 2px solid #4988bb; outline-offset: 2px; }
#trajectory-plot { min-width: 1000px; border: 0; border-radius: 0; }
.trajectory-scroll-hint { display: none; margin: 0 0 6px; color: #52606c; font-size: 12px; line-height: 18px; }
@media (max-width: 1050px) {
  .trajectory-scroll-hint { display: block; }
}
@media (max-width: 1100px) {
  #igv-controls-panel .browser-filter-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #igv-controls-panel .track-selection-fields { grid-template-columns: 110px 190px minmax(180px,1.3fr) minmax(170px,1fr); gap: 12px; }
  #igv-controls-panel .track-display-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; padding: 10px 0 0; border-left: 0; border-top: 1px solid #dce2e7; }
  #igv-controls-panel .track-height-field { flex: 0 0 calc(2 * var(--pec-control-height) + 4px); }
  #igv-controls-panel .color-control { flex: 0 0 110px; }
  #igv-controls-panel #tf-annotation-field { flex: 0 1 162px; }
}
@media (max-width: 800px) {
  #igv-controls-panel .track-selection-fields { grid-template-columns: minmax(110px,1fr) minmax(190px,1fr); gap: 8px 12px; }
}
@media (max-width: 780px) {
  #igv-controls-panel { padding-left: 14px; padding-right: 14px; }
  #igv-controls-panel .browser-toolbar { flex-direction: row; align-items: center; gap: 8px; }
  #igv-controls-panel .browser-actions { justify-content: flex-end; }
}
@media (max-width: 640px) {
  :root { --pec-control-height: 36px; }
  .workspace-nav { padding-left: 12px; padding-right: 12px; }
  .main-tabs { gap: 6px; }
  .main-tabs > li { min-width: 0; }
  .main-tabs > li > a { padding-left: 4px; padding-right: 4px; }
  #igv-controls-panel { padding: 7px 12px; }
  #igv-controls-panel .browser-toolbar { margin-bottom: 9px; padding-bottom: 8px; }
  #igv-controls-panel .browser-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); flex: 1; width: auto; gap: 4px; }
  #igv-controls-panel .browser-actions .btn { width: 100%; padding: 7px 5px; white-space: nowrap; }
  #igv-controls-panel .browser-actions .btn-primary { grid-column: auto; }
  #igv-controls-panel .selection-count { font-size: 12px; }
  #igv-controls-panel .track-selection-fields { grid-template-columns: 105px minmax(0,1fr); gap: 7px 8px; }
  #igv-controls-panel #select_modality_li, #igv-controls-panel #select_agegroup_li { grid-column: 1 / -1; }
  #igv-controls-panel .selection-pills button { padding: 7px; }
  #igv-controls-panel .filter-field .bootstrap-select > .dropdown-toggle { padding-top: 7px; padding-bottom: 7px; }
  #igv-controls-panel .controls-footer { flex-direction: row; align-items: center; gap: 6px 8px; }
  #igv-controls-panel .track-display-tools { column-gap: 8px; }
  #igv-controls-panel .color-control { flex-basis: 104px; }
  #igv-controls-panel .annotation-control summary { padding-top: 7px; padding-bottom: 7px; }
  #igv-controls-panel .signal-chip { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
  #igv-controls-panel .track-load-status { justify-self: end; }
  #igv-controls-panel .annotation-picker { left: 0; right: auto; width: min(290px,calc(100vw - 36px)); }
  #igv-controls-panel .bs-searchbox input { font-size: 16px; }
  .trajectory-controls { gap: 12px; padding: 12px; }
  .trajectory-control-group:first-child { flex-basis: 100%; }
  .trajectory-scale-options, .trajectory-legend { width: auto; max-width: 100%; flex-wrap: wrap; }
  #trajectory-gene { font-size: 16px; }
}
@media (max-width: 520px) {
  .app-product { flex: 1 1 auto; min-width: 0; }
  .app-product-name { display: block; max-width: 170px; font-size: 12px; line-height: 1.35; }
}
@media (max-width: 360px) {
  #igv-controls-panel .browser-toolbar { flex-wrap: wrap; }
  #igv-controls-panel .controls-heading { flex-basis: 100%; }
  #igv-controls-panel .browser-actions { flex-basis: 100%; }
}