* { box-sizing: border-box; }
/* Top-aligned, and the page height tracks the content so revealing the occasion
   (or opening the region panel) pushes the page down instead of re-centring it.
   min-height:100vh is deliberately absent: it would floor the page at viewport
   height, which both re-introduces the centring gap and stops the embedded iframe
   shrinking back down when elements are removed. Same fix as before-bulk/style.css. */
html, body { margin: 0; background: #ffffff; }
body { display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; }
.card { width: 100%; max-width: 420px; }
button { cursor: pointer; }
select, input, textarea { font-family: inherit; }

/* Region banner — ported from the design system's RegionBanner + RegionDropdown +
   RegionListItem (see selector/v2/styles.css for the sibling implementation this
   was adapted from). Geometry only here; colors come from assets/gt-design-system.css
   utility classes wherever a compiled one already matches the needed hex. */
.rb { position: relative; width: 100%; margin-bottom: 16px; }
.rb-link { background: transparent; border: none; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rb-link:hover { opacity: .75; }
.rb-link svg { transition: transform .18s ease; }
.rb.open .rb-link svg { transform: rotate(180deg); }
@keyframes rb-slin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* Overlays the content below rather than displacing it — the -4px overlap with the
   head comes off this absolute offset, not a negative margin on the head (a negative
   margin would drag the content below it along with it). */
.rb-panel { display: none; position: absolute; top: calc(100% - 4px); left: 0; right: 0; z-index: 20; }
.rb.open .rb-panel { display: block; animation: rb-slin .18s ease; }
.rb-li { -webkit-tap-highlight-color: transparent; transition: background-color .12s, border-color .12s; }
/* Figma has no hover variant for the active row, so hover is suppressed while
   selected — enforced by simply never adding the hover utility class to a .sel row,
   see renderRegionBanner()/rbPick() in index.html. */
.rb-li-flag-head { width: 45px; height: 24px; }
.rb-li-flag-row { width: 34px; height: 17px; }
.rb-li.row .rb-li-flag-row { width: auto; }
.rb-head-flag { width: 45px; height: 24px; }
.rb.rowregion .rb-head-flag { width: auto; }