/* Demo-only glue: the few layout pieces the webapp gets from templates or
 * server state. Tokens only, no raw colours beyond what tokens.css defines. */
[x-cloak] { display: none !important; }

.demo-topbar__left, .demo-topbar__right { display: flex; align-items: center; gap: var(--space-3); }
.demo-topbar__right { gap: var(--space-4); }
.topbar .period-pair__field { gap: var(--space-2); }

.demo-summary { padding: var(--space-3) var(--space-3) var(--space-2); }
.demo-summary .kpi--infra { flex-direction: column; }
.rail-list { min-height: 0; overflow: hidden; }
.demo-rail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.demo-evo { height: 120px; }
.demo-swatch { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); margin: 0 6px 0 2px; vertical-align: 1px; flex: none; }
.rail-row__name { display: flex; align-items: center; }
.rail-row__name > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.rail-row--sub { padding: var(--space-1) 0; }
.rail-row--sub .rail-row__name { color: var(--text-secondary); }
.demo-radius-v { margin-left: var(--space-3); font-weight: var(--fw-regular); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.demo-table-wrap { overflow-x: auto; padding-top: var(--space-2); }
.demo-op-table td, .demo-op-table th { padding: 6px var(--space-2); }
.demo-op-table tbody tr { cursor: pointer; }
.demo-op-table tbody tr:hover { background: var(--color-surface-subtle); }
.demo-row--on { background: var(--color-accent-soft); }
.demo-op-table tbody tr.demo-row--on:hover { background: var(--color-accent-soft); }

.demo-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-8); align-items: start; }
.demo-h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.demo-h3__q { font-weight: var(--fw-regular); font-size: var(--text-sm); }
.trend { min-width: 0; }

.market__chart { min-height: 210px; }
.market__series .market__chart { min-height: 330px; }
.card__topn .input { height: 22px; }

@media (max-width: 1100px) {
  .demo-split { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .summary-rail { position: static; width: auto; max-width: none; padding: var(--space-3); pointer-events: auto; }
  .map-stage { height: auto; }
  #map { position: relative; height: 62vh; }
  #map .maplibregl-ctrl-bottom-right { right: var(--space-3); }
  .perimeter-chrome { right: var(--space-4); }
  .map-slot { bottom: auto; top: 150px; width: 170px; }
  .rail-list { max-height: 420px; }
  .demo-topbar__right .account-menu__labels { display: none; }
  .demo-topbar__right .btn { padding: 0 var(--space-2); }
}
@media (max-width: 600px) {
  .demo-topbar__right .period-pair__field { display: none; }
  .demo-topbar__right .btn { display: none; }
}