/* Critical compact layout. Loaded from so the first paint already uses the final UI. */ .app-header { padding-top: .5rem !important; padding-bottom: .5rem !important; } .brand img { width: 36px !important; height: 36px !important; } .brand strong { font-size: .9rem !important; } .brand small { font-size: .72rem !important; } .install-button, .city-switch { padding: .44rem .62rem !important; font-size: .78rem !important; } .hero { margin-top: 0 !important; padding: .42rem 0 .08rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } .hero::before, .hero::after, .hero > .eyebrow, .hero > h1, .hero > .hero-copy { display: none !important; } .hero .search-row { margin-top: 0 !important; } .hero .search-row label { display: block; width: 100%; } .hero .search-row input { width: 100% !important; max-width: none !important; min-height: 2.5rem !important; padding: .58rem .8rem !important; border-radius: 999px !important; font-size: .86rem !important; box-shadow: none !important; } .status { margin-top: .2rem !important; padding: .6rem .8rem !important; } .discovery { padding: .02rem 0 .18rem !important; } .discovery-heading, .filter-workbench-heading, .category-explorer-heading, .filter-help { display: none !important; } /* Ultra-compact filter surface: controls only, no cards inside cards. */ .filter-workbench { display: grid !important; gap: .32rem !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Thin brand divider inspired by Valparaiso's colourful tile mosaics. */ .filter-workbench::before { content: ""; display: block; grid-column: 1 / -1; width: 100%; height: .72rem; margin: .05rem 0 .38rem; border-radius: .34rem; background: #0b7f93 url("../assets/mosaic-top.png") center / 22rem 100% repeat-x; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%); } .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .34rem !important; } .filter-group { min-width: 0 !important; padding: .24rem 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } .filter-group-title { margin: 0 0 .22rem !important; font-size: .64rem !important; line-height: 1 !important; letter-spacing: .055em !important; } /* Chromium lays out fieldset legends differently across viewports. Keep the semantic legend for accessibility, but reserve the visible “Cuándo” line in the ordinary date-row div so it can never look cropped. */ .filter-group:has([data-combined-when]) { position: relative !important; padding-bottom: .34rem !important; } .filter-group:has([data-combined-when]) > .filter-group-title { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } [data-combined-when] { position: relative !important; padding-top: 1.55rem !important; } [data-combined-when]::before { content: "Cuándo"; position: absolute !important; top: .08rem !important; left: 0 !important; display: block !important; color: var(--brand) !important; font-size: .68rem !important; font-weight: 850 !important; line-height: 1.28 !important; letter-spacing: .055em !important; text-transform: uppercase !important; pointer-events: none !important; } .filter-choice-row { gap: .24rem !important; } .filter-choice { padding: .32rem .46rem !important; gap: .24rem !important; font-size: .74rem !important; line-height: 1.02 !important; } .filter-choice small { min-width: 1.05rem !important; padding: .04rem .22rem !important; font-size: .61rem !important; } .custom-date-range { gap: .3rem !important; margin-top: .3rem !important; } .custom-date-range input { padding: .38rem .44rem !important; } .category-filter-panel { padding-top: .12rem !important; } .category-filters { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important; gap: .26rem !important; padding: 0 !important; overflow: visible !important; } .category-chip { width: 100% !important; min-width: 0 !important; white-space: normal !important; justify-content: space-between !important; text-align: left !important; border-radius: .62rem !important; padding: .34rem .46rem !important; gap: .28rem !important; font-size: .73rem !important; line-height: 1.04 !important; } .category-chip span { min-width: 0 !important; } .category-chip small { flex: 0 0 auto !important; font-size: .6rem !important; min-width: 1.05rem !important; padding: .04rem .22rem !important; } .agenda { padding: 0 0 2.5rem !important; } .agenda-heading { display: none !important; } .content-section { padding: .56rem 0 .85rem !important; } .content-section[data-dated-section] { padding-top: .08rem !important; border-top: 0 !important; } .content-section[data-dated-section] > .section-heading { display: none !important; } .secondary-section { margin-top: .12rem !important; } .section-heading { align-items: center !important; margin-bottom: .42rem !important; } .section-heading .eyebrow, .section-heading p:not(.eyebrow) { display: none !important; } .section-heading h3 { font-size: 1.08rem !important; line-height: 1.08 !important; } .section-count { padding: .3rem .46rem !important; font-size: .7rem !important; } .event-grid, .compact-grid { gap: .62rem !important; } .sources-section { padding-top: .62rem !important; margin-top: .3rem !important; } footer { padding: .7rem !important; font-size: .72rem !important; } @media (max-width: 560px) { .app-header { gap: .42rem !important; } .brand img { width: 32px !important; height: 32px !important; } .header-actions { gap: .25rem !important; } .install-button, .city-switch { padding: .38rem .5rem !important; font-size: .72rem !important; } .hero { padding-top: .3rem !important; } .hero .search-row input { min-height: 2.4rem !important; } .discovery { padding-bottom: .12rem !important; } .filter-workbench::before { height: .64rem; margin: .04rem 0 .34rem; border-radius: .3rem; background-size: 18rem 100%; } .filter-grid { grid-template-columns: 1fr !important; gap: .18rem !important; } .filter-group { padding: .18rem 0 !important; } .filter-group:has([data-combined-when]) { padding-bottom: .34rem !important; } [data-combined-when]::before { top: .1rem !important; line-height: 1.3 !important; } .filter-choice-row { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: .08rem !important; scrollbar-width: thin; } .filter-group:has([data-combined-when]) .filter-choice-row { padding: 1.62rem .02rem .16rem !important; scroll-padding-inline: .02rem; } .filter-choice { flex: 0 0 auto !important; white-space: nowrap !important; } .category-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .22rem !important; } .category-chip { padding: .31rem .42rem !important; font-size: .71rem !important; } } /* Installed app: close the real header gap above the mosaic. */ html[data-installed-app-actions="below-mosaic"] .app-header { min-height: 214px !important; padding-bottom: .55rem !important; }