/* The framed tour is intentionally denser than the full application. */
html, body { height: 100%; overflow: hidden; }
.app, .app.app--nav-collapsed, .app.app--nav-open { grid-template-columns: minmax(0,1fr); grid-template-rows: 40px minmax(0,1fr); grid-template-areas: "topbar" "content"; height: 100%; --rail-w: 338px; }
.env-banner, .sidebar, .nav-collapse, .topbar__account, .topbar .btn, .map-drawer { display: none !important; }
.topbar { min-height: 40px; padding: 0 14px; }
.topbar__title { font-size: 13px; }
.app.app--map, .app.app--locations { grid-template-rows: minmax(0,1fr); grid-template-areas: "content"; }
.app--map > .topbar, .app--locations > .topbar, .topbar__menu { display: none !important; }
.content, .page, .map-view { min-width: 0; overflow: hidden; height: 100%; min-height: 0; }
.map-stage { height: 100%; min-height: 0; }
#map { position: absolute; inset: 0; height: 100%; }
.summary-rail { position: absolute; top: 0; right: 0; bottom: 0; width: 338px; padding: 12px; gap: 10px; }
.perimeter-chrome { right: 356px; }
.searchbar__menu button.searchbar__opt { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; }
.searchbar__menu button.searchbar__opt:hover, .searchbar__menu button.searchbar__opt:focus-visible { background: var(--color-surface-subtle); }
.map-road-traffic:disabled { height: 38px; padding: 0 12px; opacity: 1; color: #728397; background: #f8fafc; border-color: #d7dee8; cursor: default; white-space: nowrap; box-shadow: 0 1px 3px #0a25400a; }
.map-slot { bottom: 32px; width: 220px; }
.map-slot:has(.field[style*="display: none"]) { display: none; }
.map-slot .field__hint { display: none; }
.map-admin-label { position: absolute; bottom: 40px; left: 18px; background: #fff; border: 1px solid #dce3eb; border-radius: 5px; padding: 10px 12px; font-size: 11px; color: #48546b; }
.maplibregl-ctrl-bottom-right { right: 352px; bottom: 24px; }
.maplibregl-ctrl-attrib { font-size: 10px; }
.demo-summary { padding: 12px; }
.kpi--sm .kpi__value { font-size: 25px; }
.rail-list { flex: 1; min-height: 0; overflow: hidden; }
.demo-rail-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; touch-action: pan-y; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #b5c5d4 transparent; }
.demo-rail-body .rail-head { position: sticky; top: 0; z-index: 2; background: #fff; padding-top: 4px; }
.rail-list .cpo-details > summary { pointer-events: none; }
.rail-list .cpo-details__chev { display: none; }
.demo-evo { height: 108px; }
.rail-evolution { padding: 10px; }
.page__inner { padding: 14px; }

/* Eight complete locations, including their MoM changes, without a scroll area. */
.loc-page { gap: 10px; }
.loc-header { margin-bottom: 0; }
.loc-header .page__title { font-size: 21px; }
.loc-header .page__sub { font-size: 11px; margin-top: 5px; }
.loc-band { margin-bottom: 0; gap: 12px; }
.loc-mom-caption { font-size: 10px; color: #8591a3; }
.loc-summary { padding: 8px 12px; font-size: 11px; }
.loc-scroll { overflow: hidden; max-height: none; }
.loc-grid { min-width: 0; }
.loc-cell { flex: 1; width: auto; min-width: 0; padding: 7px 12px; }
.loc-cell--location { flex: 0 0 250px; width: 250px; gap: 2px; }
.loc-row:not(.loc-row--head) .loc-cell { padding-top: 6px; padding-bottom: 6px; }
.loc-name { font-size: 10px; }
.loc-value { font-size: 16px; line-height: 1.3; }
.loc-mom { font-size: 9px; }
.loc-pills { margin-top: 0; }
.loc-pill { font-size: 9px; padding-block: 1px; }
.loc-sub { font-size: 9px; line-height: 1.3; }
.loc-map-hint { display: none; }
.loc-row--head .loc-cell { padding-block: 9px; }
.loc-sort { font-size: 10px; letter-spacing: .02em; }
.loc-footer { font-size: 10px; padding: 8px 12px; }

/* All filters and the four key panels share one viewport. */
.market { min-width: 0; display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 12px; gap: 10px; }
.market__bar { margin: 0; flex: none; flex-wrap: nowrap; gap: 8px; min-height: 36px; }
.market__bar__spacer { display: none; }
.market-filter { display: flex; align-items: center; gap: 6px; border: 1px solid #d7dee8; border-radius: 5px; background: #fff; padding: 0 8px; height: 34px; min-width: 0; flex: 1; }
.market-filter > span { font-size: 10px; color: #8895a7; }
.market-filter select { font: 500 11px Inter,sans-serif; color: #0a2540; border: 0; background: transparent; min-width: 0; max-width: 100%; width: 100%; padding: 0; cursor: pointer; }
.market__bar .chip__btn { font-size: 11px; padding: 7px 8px; min-height: 32px; gap: 5px; }
.market__bar .chip__field { font-size: 10px; }
.market__bar .period-pair__field { font-size: 10px; flex: none; }
.market__bar .period-pair__field select { font-size: 11px; }
.kpi-board { grid-template-columns: repeat(7,minmax(0,1fr)); }
.kpi-board .kpi { height: 77px; min-height: 0; padding: 10px 12px; border-top: 0 !important; }
.kpi-board .kpi__label { font-size: 10px; }
.market .kpi__value { font-size: 23px; }
.market .kpi--pair .kpi__value { font-size: 16px; }
.kpi-board .kpi__unit { font-size: 9px; }
.kpi-board .kpi__delta { font-size: 8px; padding: 1px 3px; }
.kpi-board__note { margin-top: 5px; font-size: 9px; line-height: 1.4; }
.market__grid { flex: 1; min-width: 0; min-height: 0; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr) minmax(0,1fr); grid-template-rows: minmax(0,1.12fr) minmax(0,1fr); grid-template-areas: "map series series" "hours hours mix"; gap: 10px; }
.market .card { padding: 10px 12px; min-width: 0; min-height: 0; overflow: hidden; }
.market .card__head { min-height: 26px; margin-bottom: 5px; gap: 7px; flex: none; }
.market .card__title { font-size: 12px; }
.market .card__note, .market .card__hint { font-size: 9px; }
.market .select--sm { font-size: 10px; height: 24px; min-height: 24px; padding: 2px 5px; }
.market__map .breadcrumb { margin-bottom: 4px; font-size: 10px; }
.market__map-canvas { flex: 1; min-height: 0; height: auto; }
.market__series .market__chart, .market__chart { flex: 1; width: 100%; min-width: 0; min-height: 0 !important; height: auto; overflow: hidden; }
.market__top, .card__topn { display: none !important; }
.market__series .card__head { flex-wrap: nowrap; }
.market__series .card__controls { margin-left: auto; }
.market__mix .card__head { flex-wrap: wrap; }
.market__mix .card__note { display: none; }
.cv-heatmap-mode .map-slot, .cv-heatmap-mode .perimeter-chrome { display: none; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid #00a6cc; outline-offset: 2px; }
.rail-head .rail-row__name { padding-left: 0; }
.rail-row__name { overflow: visible; white-space: normal; font-size: 10px; line-height: 1.3; }
.rail-row__cpo { white-space: normal; line-height: 1.3; }
.rail-row { padding-block: 7px; }

.loc-filter-wrap { position: relative; flex: none; z-index: 10; }
.loc-filter-toggle { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid #cbd6e1; background: #fff; color: #29455d; border-radius: 5px; font-size: 11px; cursor: pointer; }
.loc-filter-toggle[aria-expanded=true] { background: #e8f8fc; border-color: #00a6cc; }
.loc-filter-count { display: grid; place-items: center; width: 15px; height: 15px; background: #0a2540; border-radius: 50%; color: #fff; font-size: 9px; }
.loc-filter-panel { position: absolute; top: calc(100% + 7px); right: 0; width: 280px; padding: 15px; background: #fff; border: 1px solid #d9e3ec; border-radius: 7px; box-shadow: 0 12px 32px #0a254021; }
.loc-filter-panel__head, .loc-filter-panel__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.loc-filter-panel__head { font-size: 12px; margin-bottom: 15px; }
.loc-filter-panel__head button { border: 0; background: none; padding: 0 3px; font-size: 19px; cursor: pointer; }
.loc-filter-panel > label { display: grid; gap: 5px; margin-bottom: 12px; color: #8390a2; font-size: 11px; }
.loc-filter-panel select { width: 100%; min-width: 0; border: 1px solid #d9e3ec; padding: 6px 8px; height: 32px; border-radius: 4px; color: #29455d; background: #fff; font-size: 11px; }
.loc-filter-panel__foot { padding-top: 4px; font-size: 10px; color: #8390a2; }
.loc-filter-panel__foot button { border: 0; background: none; color: #008ca8; font: inherit; font-weight: 600; cursor: pointer; }
.loc-no-results { text-align: center; font-size: 12px; padding: 25px; color: #8390a2; }
.market-filter:has(select:disabled), .market__bar .chip:has(button:disabled) { background: #f8fafc; border-color: #e0e6ed; }
.market-filter select:disabled, .market__bar .chip__btn:disabled { opacity: .65; color: #6b7b8d; cursor: default; }
.topbar .tab:disabled { cursor: default; }
.demo-rail-body :is(.rail-head,.rail-row) .rail-row__n { flex-basis: 46px; }
.demo-rail-body :is(.rail-head,.rail-row) .rail-row__n--cp { flex-basis: 28px; }
.demo-rail-body :is(.rail-head,.rail-row) .rail-row__share { flex-basis: 48px; }

/* Location tools stay in the framed view; columns never force a horizontal scroll. */
.loc-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.loc-download { flex: none; color: #fff; background: #0a2540; border-color: #0a2540; }
.loc-download:hover { background: #164766; }
.loc-filter-toggle:focus-visible { outline: 2px solid #00a6cc; outline-offset: 2px; }
.loc-columns-count { color: #0a2540; background: #edf2f7; border-radius: 4px; padding: 2px 5px; font-size: 10px; font-variant-numeric: tabular-nums; }
.loc-columns-panel { width: 350px; }
.loc-columns-panel .loc-filter-panel__head { margin-bottom: 6px; }
.loc-columns-help { margin: 0 0 12px; font-size: 10px; color: #687a8e; line-height: 1.5; }
.loc-columns-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin-bottom: 12px; }
.loc-columns-list label { display: flex; align-items: center; gap: 7px; min-height: 30px; color: #29455d; font-size: 11px; cursor: pointer; }
.loc-columns-list input { accent-color: #0a2540; flex: none; width: 14px; height: 14px; }
.loc-columns-list label:has(input:disabled) { color: #7f8c9b; cursor: default; }
.loc-value--text { font-size: 13px; overflow-wrap: anywhere; }