/* Standard filter controls (franzen-app-standards DESIGN_SYSTEM.md, FLORIDA_ROS_CONTROLS.md,
   templates/brand-system.css .segment-control). Loaded after the tab modules' own CSS
   through higher-specificity selectors, so the modules' JS and markup stay untouched.
   Rules: no pills unless a true segmented selector; controls use the UI font, never mono;
   multi-select states are a compact toggle grid with aria-pressed-style on/off state. */

/* Multi-select state toggles: grid of compact rectangular toggles (3D site pattern, light). */
#tab-regional #regional-root .rg-states {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border: 1px solid #dfe3e8;
  border-radius: 7px;
  background: #f9fafb;
}
#tab-regional #regional-root .rg-chip {
  min-height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 4px 2px;
  border: 1px solid #dfe3e8;
  border-radius: 5px;
  background: #fff;
  color: #20242b;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
  text-align: center;
}
#tab-regional #regional-root .rg-chip:hover { border-color: #b9c1cb; color: #111318; }
#tab-regional #regional-root .rg-chip.on { border-color: #ED1B2E; background: #fff0f2; color: #9f0014; }
#tab-regional #regional-root .rg-chip.on:hover { filter: none; background: #ffe4e8; }

/* Segmented selectors: category, segment toggles. Rectangular, UI font, red when pressed.
   Category colors stay (they are the Saffir-Simpson legend), on a square 5px radius. */
#tab-regional #regional-root .rg-cats,
#tab-overview .filter-bar .pill-row,
#tab-globe #globe-root .gl-cats {
  display: inline-flex; flex-wrap: wrap; gap: 3px;
  padding: 4px;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  background: #fff;
}
#tab-regional #regional-root .rg-catchip,
#tab-overview .filter-bar .filter-pill,
#tab-globe #globe-root .gl-cat {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #69717d;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  transition: none;
}
#tab-regional #regional-root .rg-catchip:hover,
#tab-overview .filter-bar .filter-pill:hover,
#tab-globe #globe-root .gl-cat:hover { background: #f9fafb; color: #111318; border-color: transparent; }
#tab-overview .filter-bar .filter-pill.active { background: #ED1B2E; color: #fff; border-color: #ED1B2E; }
#tab-regional #regional-root .rg-catchip.on,
#tab-globe #globe-root .gl-cat.on { color: #fff; }
#tab-regional #regional-root .rg-seg { margin-left: auto; display: inline-flex; border: 1px solid #dfe3e8; border-radius: 6px; padding: 3px; gap: 3px; }
#tab-regional #regional-root .rg-seg button { font-family: var(--font-ui); font-size: 12px; font-weight: 750; border: 0; border-radius: 5px; min-height: 24px; padding: 0 9px; background: transparent; color: #69717d; cursor: pointer; }
#tab-regional #regional-root .rg-seg button.on { background: #ED1B2E; color: #fff; }

/* Mono belongs to data readouts only. Labels, headings, buttons, inputs and selects use the UI font. */
#tab-regional #regional-root .rg-acc-head,
#tab-regional #regional-root .rg-drawer-title,
#tab-regional #regional-root .rg-btn,
#tab-regional #regional-root .rg-side-body input[type=number],
#tab-regional #regional-root .rg-side-body select,
#tab-regional #regional-root .rg-side.collapsed .rg-rail-label,
#tab-globe #globe-root .gl-acc-head,
#tab-globe #globe-root .gl-field > label,
#tab-globe #globe-root .gl-controls select,
#tab-globe #globe-root .gl-row input,
#tab-globe #globe-root .gl-row select,
#tab-globe #globe-root .gl-btn,
#tab-globe #globe-root .gl-states-clear,
#tab-intelligence .intel-controls label,
#tab-intelligence .intel-kpi .k-lbl { font-family: var(--font-ui); }
#tab-regional #regional-root .rg-acc-head,
#tab-globe #globe-root .gl-acc-head { letter-spacing: .06em; font-size: 12px; }

/* Regional sidebar: spend vertical space on the controls, not on chrome. */
#tab-regional #regional-root .rg-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #69717d; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-regional #regional-root .rg-acc-group { border: 1px solid #dfe3e8; border-radius: 6px; margin-bottom: 6px; }
#tab-regional #regional-root .rg-acc-head { background: #fff; color: #111318; padding: 9px 12px; font-size: 12px; letter-spacing: .06em; }
#tab-regional #regional-root .rg-acc-head:hover { background: #f9fafb; }
#tab-regional #regional-root .rg-acc-head.open { border-bottom: 1px solid #dfe3e8; }
#tab-regional #regional-root .rg-acc-caret { font-size: 15px; line-height: 1; color: #111318; width: 18px; text-align: center; }
#tab-regional #regional-root .rg-acc-body { padding: 8px 10px 10px; }
#tab-regional #regional-root .rg-sec { margin-top: 10px; }
#tab-regional #regional-root .rg-flabel { margin-bottom: 4px; }

/* ---- One sidebar spec for Overview, 3D Globe and Regional ----------------------
   Panel padding 12px. Section labels 11px uppercase muted. Accordion groups: white
   head, dark chevron, 6px radius, 6px between groups. Segmented rows scroll sideways
   rather than wrapping. State pickers are four-column code grids. */

/* Panel bodies */
#tab-overview .map-shell .panel-body,
#tab-globe #globe-root .gl-side-body,
#tab-regional #regional-root .rg-side-body,
#tab-query .map-shell .panel-body { padding: 12px !important; }
#tab-globe #globe-root .gl-side-body > .gl-card { padding: 10px 0; }
#tab-globe #globe-root .gl-side-body > .gl-card.gl-pinned { margin: 0 -12px; padding: 10px 12px 8px; }
#tab-overview .map-shell .panel-section { padding-bottom: 10px; margin-bottom: 10px; }

/* Section labels: one style everywhere */
#tab-overview .map-shell .panel-section > h3,
#tab-globe #globe-root .gl-h,
#tab-regional #regional-root .rg-h,
#tab-regional #regional-root .rg-flabel,
#tab-globe #globe-root .gl-field > label { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #69717d; margin: 0 0 6px; }
#tab-globe #globe-root .gl-sub { display: none; }

/* Accordion groups */
#tab-globe #globe-root .gl-acc-group,
#tab-regional #regional-root .rg-acc-group { border: 1px solid #dfe3e8; border-radius: 6px; margin-bottom: 6px; overflow: hidden; }
#tab-globe #globe-root .gl-acc-head,
#tab-regional #regional-root .rg-acc-head { background: #fff; color: #111318; padding: 9px 12px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#tab-globe #globe-root .gl-acc-head:hover,
#tab-regional #regional-root .rg-acc-head:hover { background: #f9fafb; }
#tab-globe #globe-root .gl-acc-head.open,
#tab-regional #regional-root .rg-acc-head.open { border-bottom: 1px solid #dfe3e8; }
#tab-globe #globe-root .gl-acc-caret,
#tab-regional #regional-root .rg-acc-caret { font-size: 15px; line-height: 1; color: #111318; width: 18px; text-align: center; }
#tab-globe #globe-root .gl-acc-body,
#tab-regional #regional-root .rg-acc-body { padding: 8px 10px 10px; }

/* Segmented rows: never wrap, scroll sideways if the panel is narrow */
#tab-regional #regional-root .rg-cats,
#tab-overview .filter-bar .pill-row,
#tab-globe #globe-root .gl-cats { display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
#tab-regional #regional-root .rg-cats::-webkit-scrollbar,
#tab-overview .filter-bar .pill-row::-webkit-scrollbar,
#tab-globe #globe-root .gl-cats::-webkit-scrollbar { display: none; }
#tab-regional #regional-root .rg-catchip,
#tab-overview .filter-bar .filter-pill,
#tab-globe #globe-root .gl-cat { padding: 0 7px; font-size: 12px; letter-spacing: 0; min-height: 28px; flex: none; }

/* State pickers: Globe "States Hit" becomes the same four-column code grid as Regional */
#tab-globe #globe-root .gl-states { max-height: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; border: 1px solid #dfe3e8; border-radius: 7px; background: #f9fafb; }
#tab-globe #globe-root .gl-states label { position: relative; min-height: 32px; display: flex; align-items: center; justify-content: center; padding: 4px 2px; border: 1px solid #dfe3e8; border-radius: 5px; background: #fff; color: #20242b; font-family: var(--font-ui); font-size: 12px; font-weight: 700; cursor: pointer; }
#tab-globe #globe-root .gl-states label:hover { border-color: #b9c1cb; color: #111318; }
#tab-globe #globe-root .gl-states label:has(input:checked) { border-color: #ED1B2E; background: #fff0f2; color: #9f0014; }
#tab-globe #globe-root .gl-states input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
#tab-globe #globe-root .gl-states label:has(input:focus-visible) { outline: 2px solid #1d4ed8; outline-offset: 1px; }
#tab-globe #globe-root .gl-states-clear { margin-top: 6px; padding: 0; font-size: 12px; }

/* Inputs and selects: one height, one radius */
#tab-overview .map-shell .panel-body input[type=text],
#tab-overview .map-shell .panel-body select,
#tab-globe #globe-root .gl-side-body input[type=number],
#tab-globe #globe-root .gl-side-body input[type=text],
#tab-globe #globe-root .gl-side-body select,
#tab-regional #regional-root .rg-side-body input[type=number],
#tab-regional #regional-root .rg-side-body select { min-height: 32px; border-radius: 6px; border: 1px solid #dfe3e8; font-family: var(--font-ui); font-size: 13px; }
#tab-globe #globe-root .gl-row { margin: 6px 0; }
#tab-globe #globe-root .gl-check, #tab-regional #regional-root .rg-check { font-size: 13px; }

/* Checkbox rows: sentence case, readable */
#tab-globe #globe-root .gl-check,
#tab-globe #globe-root .gl-row label.gl-check { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: #20242b; }

/* Regional right panel: summary cards and storm detail */
#tab-regional #regional-root .rg-stat { border: 1px solid #dfe3e8; border-radius: 6px; padding: 10px 12px; background: #fff; }
#tab-regional #regional-root .rg-stat-name { font-family: var(--font-ui); font-size: 14px; font-weight: 700; margin-bottom: 6px; }
#tab-regional #regional-root .rg-stat-row { font-size: 13px; margin: 2px 0; }
#tab-regional #regional-root .rg-detail-name { font-family: var(--font-ui); font-size: 18px; font-weight: 750; }