/* Keep the interval rail short; the full catalogue is an anchored, accessible popover. */
.stoch-panel #timeframeControl { position: relative; display: flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; gap: 3px; min-width: 0; width: max-content; max-width: 100%; margin: 0; padding: 3px; border: 1px solid #343d47; border-radius: 6px; background: #101317; }
.stoch-panel #timeframeFavorites { display: flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 0; max-width: 360px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #415064 transparent; }
.stoch-panel #timeframeFavorites button { flex: 0 0 auto; min-width: 37px; min-height: 32px; margin: 0; padding: 5px 9px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #a3adbc; box-shadow: none; font: 600 11px/1.3 Arial,sans-serif; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.stoch-panel #timeframeFavorites button[aria-pressed='true'] { color: #b2e7d3; border-color: #3d6657; background: #213a31; }
.stoch-panel #timeframeFavorites button.is-unpinned { border-style: dashed; }
.stoch-panel #timeframeMenuToggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-width: 36px; min-height: 32px; padding: 5px 9px; border: 1px solid #39424e; border-radius: 4px; background: #1b222b; box-shadow: none; color: #cbd6e3; font: 500 10px/1.3 Arial,sans-serif; letter-spacing: 0; white-space: nowrap; cursor: pointer; }
.stoch-panel #timeframeMenuToggle[aria-expanded='true'] { color: #b2e7d3; border-color: #638c7d; background: #243b32; }
.stoch-panel #timeframeMenu { position: fixed; z-index: 100; max-width: calc(100vw - 24px); max-height: min(560px, calc(100dvh - 24px)); overflow-y: auto; overscroll-behavior: contain; padding: 14px; border: 1px solid #49586a; border-radius: 9px; background: #171d25; color: #dce5f0; box-shadow: 0 14px 42px #000a; scrollbar-width: thin; scrollbar-color: #49586a #171d25; }
.stoch-panel #timeframeMenu[hidden] { display: none; }
.stoch-panel #timeframeMenu .timeframe-menu-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.stoch-panel #timeframeMenu .timeframe-menu-head strong { color: #e1e9f2; font: 600 13px/1.5 Arial,sans-serif; }
.stoch-panel #timeframeMenu button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 32px; min-height: 32px; margin: 0; padding: 5px 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #c8d1df; font: 500 11px/1.4 Arial,sans-serif; letter-spacing: 0; box-shadow: none; cursor: pointer; }
.stoch-panel #timeframeMenu #timeframeMenuClose { min-width: 32px; min-height: 30px; font-size: 21px; }
.stoch-panel #timeframeMenu .timeframe-quick-form { margin: 0; }
.stoch-panel #timeframeMenu .timeframe-quick-form label { display: block; margin-bottom: 5px; color: #aab6c6; font: 11px/1.4 Arial,sans-serif; }
.stoch-panel #timeframeMenu .timeframe-quick-form > div { display: flex; gap: 6px; }
.stoch-panel #timeframeQuickInput { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 35px; padding: 7px 10px; border: 1px solid #3d4a5d; border-radius: 5px; background: #11171f; color: #dce8f5; font: 12px/1.4 Arial,sans-serif; color-scheme: dark; }
.stoch-panel #timeframeQuickInput::placeholder { color: #76869c; }
.stoch-panel #timeframeQuickInput[aria-invalid='true'] { border-color: #db8491; }
.stoch-panel #timeframeMenu #timeframeQuickGo { min-width: 58px; border-color: #456d5f; background: #243e34; color: #bce9d8; }
.stoch-panel #timeframeMenu .timeframe-menu-hint { margin: 8px 0 13px; color: #8d9db1; font: 10px/1.5 Arial,sans-serif; }
.stoch-panel #timeframeMenu .timeframe-menu-groups { display: grid; gap: 13px; }
.stoch-panel #timeframeMenu .timeframe-menu-section { margin: 0; padding: 0; }
.stoch-panel #timeframeMenu .timeframe-menu-section h4 { margin: 0 0 6px; color: #91a2b8; font: 500 10px/1.4 Arial,sans-serif; letter-spacing: .04em; }
.stoch-panel #timeframeMenu .timeframe-option-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.stoch-panel #timeframeMenu .timeframe-option { display: flex; min-width: 0; overflow: hidden; border: 1px solid #333e4d; border-radius: 5px; background: #1c2530; }
.stoch-panel #timeframeMenu .timeframe-choose { flex: 1 1 auto; min-width: 0; justify-content: flex-start; padding-inline: 10px 5px; color: #c9d7e8; font-variant-numeric: tabular-nums; }
.stoch-panel #timeframeMenu .timeframe-choose[aria-pressed='true'] { color: #b8ead7; background: #264334; border-color: #537d68; }
.stoch-panel #timeframeMenu .timeframe-pin { flex: 0 0 28px; min-width: 28px; padding: 3px 5px; color: #70819b; font-size: 17px; }
.stoch-panel #timeframeMenu .timeframe-pin[aria-pressed='true'] { color: #d8bd73; background: #332e22; }
.stoch-panel #timeframeMenu .timeframe-menu-status { margin: 9px 0 0; color: #e5a6ad; font: 11px/1.5 Arial,sans-serif; }
.stoch-panel #timeframeMenu .timeframe-menu-status:empty { display: none; }
.stoch-panel #timeframeControl button:disabled { color: #697587; opacity: .45; cursor: not-allowed; }
.stoch-panel #timeframeControl button:focus-visible, .stoch-panel #timeframeQuickInput:focus-visible { outline: 2px solid #9cdcc8; outline-offset: 2px; }
@media (hover: hover) { .stoch-panel #timeframeControl button:not(:disabled):hover { color: #e6effa; background: #2e3b4b; } }
@media (max-width: 800px) {
  .stoch-panel #timeframeControl { flex: 1 1 auto; width: 100%; max-width: 100%; }
  .stoch-panel #timeframeFavorites { flex: 1 1 auto; max-width: none; }
  .stoch-panel #timeframeFavorites button, .stoch-panel #timeframeMenuToggle { min-height: 38px; }
  .stoch-panel #timeframeMenu button { min-height: 38px; }
  .stoch-panel #timeframeMenu .timeframe-pin { min-width: 34px; flex-basis: 34px; }
  .stoch-panel #timeframeMenu { padding: 12px; }
}
@media (max-width: 480px) {
  .stoch-panel #timeframeFavorites button { min-width: 34px; padding-inline: 7px; }
  .stoch-panel #timeframeMenuLabel { display: none; }
  .stoch-panel #timeframeMenu .timeframe-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stoch-panel #timeframeMenu .timeframe-choose { padding-inline: 8px 3px; }
}