* { box-sizing: border-box; } body { margin: 0; font: var(--weight-body) var(--text-body)/1.5 var(--font-body); color: var(--fg); background: var(--page-bg); } .footer p { color: var(--fg-2); } .meta { color: var(--muted); } .colmenu__legend { margin-inline-end: var(--space-1); } .langpick__btn { color: var(--fg-2); } .footer .footer__sponsor { font: var(--weight-body) var(--text-body)/1.5 var(--font-body); letter-spacing: 0; margin-block: var(--space-4) var(--space-2); } .langpick__opt { inline-size: 100%; border: 0; background: none; cursor: pointer; text-align: start; } .langpick__extra { display: none; } h1 { font-size: var(--text-page); font-weight: var(--weight-display); line-height: 1.19; } h2 { font-size: var(--text-section); font-weight: var(--weight-body); line-height: 1.25; } h3 { font-size: var(--text-sub); font-weight: var(--weight-body); line-height: 1.33; } a { color: var(--accent); } .about-mascot { display: block; inline-size: min(200px, 60%); block-size: auto; margin-block-end: var(--space-3); } .page-head .t-sub { font-size: var(--text-card); font-weight: var(--weight-body); line-height: 1.25; margin: 0; color: var(--muted); } :focus-visible { outline: none; box-shadow: var(--focus-ring); } @media (forced-colors: active) { :focus-visible:not(.page), .colmenu__opt:focus-within, .switcher__opt input:focus-visible + span { outline: 2px solid Highlight !important; outline-offset: 2px; } .gauge--pick[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -2px; } } .skip { position: absolute; z-index: 1000; inset-block-start: 8px; inset-inline-start: 8px; padding: var(--space-2) var(--space-3); background: var(--bg); color: var(--fg); border-radius: var(--radius); box-shadow: var(--elev-raised); transform: translateY(-200%); } .skip:focus-visible { transform: none; box-shadow: var(--focus-ring); } .page:focus { outline: none; box-shadow: none; } .table-controls { display: flex; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; padding-block-end: var(--space-4); } .table-controls .field--search { flex: 1 1 22rem; max-inline-size: 28rem; } @media (max-width: 672px) { .table-controls .field--search { flex-basis: 100%; max-inline-size: none; } } svg.chip__swatch { outline: none; } .notice { color: var(--muted); padding: var(--space-2) 0; } .notice strong { color: var(--fg-2); } strong, b { font-weight: var(--weight-emphasis); } .disclaimer { color: var(--fg-2); } .notice-inline { color: var(--muted); font-size: var(--text-compact); letter-spacing: var(--track-compact); } .breadcrumb { font-size: var(--text-compact); color: var(--fg-2); white-space: nowrap; overflow-x: auto; } @media (min-width: 672px) { .breadcrumb { margin-block-start: var(--space-6); } } .breadcrumb__sep { color: var(--muted); padding-inline: var(--space-1); } .area-now, .area-day { margin-block: var(--space-2) 0; } @media (hover: none) { .frame > .area-summary, .frame > .notice { order: 1; } .frame:has(> .area-summary) > #below-map { order: 2; } } .area-day { color: var(--fg-2); } .area-links { margin-block-start: var(--space-6); } .area-links__block { margin-block-end: var(--space-4); } .area-links__block h2 { font-size: var(--text-compact); color: var(--fg-2); margin-block-end: var(--space-1); } .area-links__block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .faq { margin-block-start: var(--space-6); } .faq h2 { font-size: var(--text-card); margin-block-end: var(--space-2); } .faq__item { border-block-start: 1px solid var(--border-faint); } .faq__item:last-child { border-block-end: 1px solid var(--border-faint); } .faq__item > summary { display: flex; align-items: center; min-block-size: 44px; padding-block: var(--space-2); font-weight: var(--weight-emphasis); cursor: pointer; } .faq__item > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } .faq__answer { color: var(--fg-2); padding-block-end: var(--space-3); max-inline-size: 70ch; } .faq__answer p { margin: 0; } .pollen { margin-block-start: var(--space-6); scroll-margin-block-start: calc(var(--masthead-h) + var(--space-2)); } .pollen h2 { font-size: var(--text-section); margin-block-end: var(--space-2); } .pollen-scroll { overflow-x: auto; } .pollen-table { border-collapse: collapse; inline-size: 100%; font-size: var(--text-compact); } .pollen-table th, .pollen-table td { padding: var(--space-1) var(--space-2); text-align: start; border-block-end: 1px solid var(--border-faint); vertical-align: top; } .pollen-table thead th { color: var(--muted); font-weight: var(--weight-emphasis); white-space: nowrap; } .pollen-table tbody th { font-weight: var(--weight-emphasis); white-space: nowrap; } .pollen-table td { min-inline-size: 5rem; } .pollen-level { display: block; } .pollen-bar { display: block; block-size: 4px; inline-size: 0; margin-block: 2px; border-radius: var(--radius-pill); background: var(--pollen-low); } .pollen-value { color: var(--muted); font-variant-numeric: tabular-nums; } .pollen-none { color: var(--muted); } [data-level="low"] .pollen-bar { inline-size: 33%; } [data-level="moderate"] .pollen-bar { inline-size: 66%; background: var(--pollen-moderate); } [data-level="high"] .pollen-bar { inline-size: 100%; background: var(--pollen-high); } .pollen-note, .pollen-credit { font-size: var(--text-caption); color: var(--muted); margin-block-start: var(--space-2); } .pollen-chip { display: inline-block; flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; line-height: calc(var(--control-height) - 2px); padding-inline: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--fg); font-size: var(--text-compact); text-decoration: none; white-space: nowrap; } .pollen-chip:hover { border-color: var(--accent); } .areas-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-4); } .areas-directory__group h3 { font-size: var(--text-compact); margin-block-end: var(--space-1); } .areas-directory__group h4 { font-size: var(--text-caption); color: var(--fg-2); margin-block: var(--space-2) var(--space-1); } .areas-directory__group ul { list-style: none; margin: 0; padding: 0; } .areas-directory__group:has(> .areas-directory__districts) { grid-column: 1 / -1; } .areas-directory__districts { columns: 5 10rem; column-gap: var(--space-4); } .areas-directory__districts li { break-inside: avoid; } #chart { min-block-size: 12rem; } .map-hint[hidden] { display: none; } .map__layers:has(.colmenu__panel:not([hidden])) { z-index: 7; } .map-note { position: absolute; z-index: 1; inset-inline-start: calc(12px + 32px + var(--space-2)); top: 12px; background: var(--overlay-bg); border: 0; border-radius: var(--radius); box-shadow: var(--elev-raised); padding: var(--space-1) var(--space-2); font-size: var(--text-caption); letter-spacing: var(--track-caption); color: var(--muted); } .map-note[hidden] { display: none; } .map-window { position: relative; } .map-window__btn { block-size: calc(1.75rem + 2 * var(--space-1)); min-block-size: 0; padding: 0 var(--space-2); background: var(--overlay-bg); border: 0; border-radius: var(--radius); box-shadow: var(--elev-raised); font-size: var(--text-caption); letter-spacing: var(--track-caption); color: var(--fg); cursor: pointer; } .map-window__btn:hover { background: var(--surface-2); } .map-window__btn[aria-expanded="true"] { background: var(--fg); color: var(--bg); } .map-window__btn:focus-visible { box-shadow: var(--focus-ring); } .map-window__panel { inset-block-start: auto; inset-block-end: calc(100% + var(--space-2)); inset-inline-end: auto; inset-inline-start: 0; inline-size: max-content; max-inline-size: calc(100vw - var(--space-6)); padding: var(--space-3); } .map-window__panel .colmenu__opt { white-space: nowrap; } .map-play { display: flex; align-items: center; gap: var(--space-2); background: var(--overlay-bg); border-radius: var(--radius); box-shadow: var(--elev-raised); padding: 0 var(--space-2); block-size: calc(1.75rem + 2 * var(--space-1)); } .map-play__btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75rem; block-size: 1.75rem; min-block-size: 0; padding: 0; background: none; border: 0; border-radius: var(--radius-sm); color: var(--fg); cursor: pointer; } .map-play__btn:hover { background: var(--surface-2); } .map-play__btn:focus-visible { box-shadow: var(--focus-ring); } .map-play__scrub { inline-size: 7rem; accent-color: var(--accent); } .map-play__clock { font-size: var(--text-caption); letter-spacing: var(--track-caption); color: var(--meta); font-variant-numeric: tabular-nums; white-space: nowrap; } .map-play__note { font-size: var(--text-caption); letter-spacing: var(--track-caption); color: var(--meta); max-inline-size: 11rem; } .map-play__exit { color: var(--meta); } .map-play__exit:hover { color: var(--fg); } .map-play__speed { font-size: var(--text-caption); letter-spacing: var(--track-caption); font-variant-numeric: tabular-nums; inline-size: auto; min-inline-size: 2.75rem; padding-inline: var(--space-1); } .map-play__speedpanel { inset-block-start: auto; inset-block-end: calc(100% + var(--space-2)); inset-inline-end: 0; min-inline-size: 0; inline-size: max-content; padding: var(--space-1); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); } .map-play__speeditem { inline-size: 100%; margin-inline: 0; justify-content: flex-start; background: none; border: 0; border-radius: var(--radius-sm); color: var(--fg); font-size: var(--text-caption); font-variant-numeric: tabular-nums; } .map-play__speeditem:focus-visible { box-shadow: var(--focus-ring); } .map-play__speeditem[aria-checked="true"] { font-weight: 600; background: var(--surface-2); } .map-play__speeditem[aria-checked="true"]::before { content: "\2713"; inline-size: 1em; } .map-play__speeditem[aria-checked="false"]::before { content: ""; inline-size: 1em; } @media (max-width: 480px) { .map-play__speeditem { min-block-size: 44px; } } .legend-swatch { inline-size: 12px; block-size: 14px; flex: none; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .scale__wind { margin-block: var(--space-3) 0; padding-block-start: var(--space-2); border-block-start: 1px solid var(--border); } .scale__sea { margin-block: var(--space-3) 0; padding-block-start: var(--space-2); border-block-start: 1px solid var(--border); display: grid; gap: var(--space-1); } .scale__sea[hidden] { display: none; } .scale__sea-head { margin: 0; color: var(--fg-2); font-size: var(--text-caption); letter-spacing: var(--track-caption); } .legend-swatch--sea { clip-path: none; block-size: 12px; } .scale__pollen { margin-block: var(--space-3) 0; padding-block-start: var(--space-2); border-block-start: 1px solid var(--border); display: grid; gap: var(--space-1); } .scale__pollen[hidden] { display: none; } .scale__pollen-head { margin: 0; color: var(--fg-2); font-size: var(--text-caption); letter-spacing: var(--track-caption); } .scale--onmap.scale--pollen > .scale__label, .scale--onmap.scale--pollen > .scale__bands, .scale--onmap.scale--pollen > .scale__none { display: none; } .scale--pollen > :is(.scale__wind, .scale__sea, .scale__pollen) { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; } .scale--pollen > .scale__wind:not([hidden]) ~ .scale__sea, .scale--pollen > :is(.scale__wind, .scale__sea):not([hidden]) ~ .scale__pollen { margin-block-start: var(--space-3); padding-block-start: var(--space-2); border-block-start: 1px solid var(--border); } .scale--onmap.scale--pollen:not([open]) .scale__toggle::after { content: none; } .legend-swatch--pollen { clip-path: none; block-size: 12px; fill-opacity: 0.7; } .legend-swatch--pollen-low { color: var(--pollen-low); fill-opacity: 0.35; } .legend-swatch--pollen-moderate { color: var(--pollen-moderate); } .legend-swatch--pollen-high { color: var(--pollen-high); } .legend-wind-glyph { inline-size: 24px; block-size: 16px; flex: none; color: var(--wind-glyph); } .scale--progressive .scale__bands--vertical .scale__band-edge { display: block; inset-inline-start: 26px; } .scale--progressive .scale__bands--vertical .scale__band-name { display: block; position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .scale__toggle-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .colmenu--start .colmenu__panel { inset-inline-start: 0; inset-inline-end: auto; } .colmenu__caret { inline-size: 0; block-size: 0; flex: none; margin-inline-start: var(--space-2); border-inline: 4px solid transparent; border-block-start: 5px solid currentColor; } .colmenu__btn, .colmenu > .btn { display: inline-flex; align-items: center; } [aria-expanded="true"] > .colmenu__caret { transform: rotate(180deg); } .map__layers .colmenu__panel { inline-size: max-content; max-inline-size: calc(100vw - var(--space-6)); overscroll-behavior: contain; touch-action: pan-y; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); } .map__layers .colmenu__opt { white-space: nowrap; } @media (max-width: 480px) { .map__layers .colmenu__opt { white-space: normal; } } .colmenu__mark { inline-size: 0.625rem; block-size: 0.625rem; flex: none; background: var(--fg-2); border: 1px solid var(--bg); } .colmenu__mark--circle { border-radius: 50%; } .colmenu__mark--diamond { transform: rotate(45deg); } .colmenu__mark--square { border-radius: 1px; } .colmenu__mark--blank { visibility: hidden; } .colmenu__mark--ring { border-radius: 50%; background: none; border: 2px solid var(--fg-2); } .map-tier { margin: var(--space-2) 0 0; padding-inline: var(--gutter); } .frame .map-tier { padding-inline: 0; } .map-tier[hidden] { display: none; } .map-data-link { margin: var(--space-1) 0 0; padding-inline: var(--gutter); } .map-data-link .link { display: inline-block; min-block-size: 24px; line-height: 24px; } .map-locate { position: absolute; z-index: 3; bottom: var(--space-2); inset-inline-end: var(--space-2); display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; background: var(--overlay-bg); border: 0; border-radius: 999px; box-shadow: var(--elev-raised); padding: 0; color: var(--fg); cursor: pointer; } .map-locate:hover { background: var(--surface); } .map-locate:focus-visible { box-shadow: var(--focus-ring); } .map-locate-hint { position: absolute; z-index: 3; inset-block-end: var(--locate-hint-lift); inset-inline-end: var(--space-2); max-inline-size: min(16rem, calc(100% - 2 * var(--space-2))); } .map-locate-hint__btn { display: block; inline-size: 100%; padding: var(--space-1) var(--space-3); border-radius: var(--radius); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--elev-raised); color: var(--fg); font: inherit; font-size: var(--text-compact); text-align: start; cursor: pointer; } .map-locate-hint__btn:focus-visible { box-shadow: var(--focus-ring); } .map-locate-hint::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-end: var(--locate-hint-arrow-inset); inline-size: 14px; block-size: 7px; background: var(--glass-bg); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .map-locate-hint { animation: locate-hint-in 200ms ease-out; } } @keyframes locate-hint-in { from { opacity: 0; } to { opacity: 1; } } .maplibregl-ctrl-bottom-right { margin-inline-end: 2.5rem; } .map-wind-label { position: absolute; z-index: 1; bottom: 3.5rem; inset-inline-end: var(--space-2); max-inline-size: 18rem; background: var(--overlay-bg); border: 0; border-radius: var(--radius); box-shadow: var(--elev-raised); padding: var(--space-1) var(--space-2); font-size: var(--text-caption); letter-spacing: var(--track-caption); color: var(--fg-2); } .map-wind-label[hidden] { display: none; } .map-wind-label__toggle { cursor: pointer; list-style: none; color: var(--fg); } .map-wind-label__toggle { display: flex; align-items: center; min-inline-size: 24px; min-block-size: 24px; } .map-wind-label__toggle::-webkit-details-marker { display: none; } .map-wind-label__toggle::before { content: 'ⓘ'; margin-inline-end: var(--space-1); } .map-wind-label__toggle:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius); } .map-wind-label__text:not(:empty) { margin-block-start: var(--space-1); } :has(> .map-locate-hint) > .map-wind-label:not([open]) { inset-block-end: calc(var(--locate-hint-lift) + var(--locate-hint-clear)); } .map-sea { position: absolute; z-index: 5; inset-block-start: calc(12px + 48px + var(--space-2)); inset-inline-end: calc(var(--space-2) * 2 + 40px); inline-size: min(22rem, calc(100% - 24px)); max-block-size: calc(100% - 12px - 48px - var(--space-2) - 4.5rem); overflow: auto; background: var(--bg); border-radius: var(--radius); box-shadow: var(--elev-raised); } .map-sea[hidden] { display: none; } .sea-panel { padding: var(--space-2) var(--space-3) var(--space-3); font-size: var(--text-compact); } .sea-panel p { margin: 0 0 var(--space-2); } .sea-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); } .sea-panel__title { margin: 0; font-size: var(--text-body); line-height: 1.3; } .sea-panel__close { flex: none; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 32px; min-block-size: 32px; border: 0; border-radius: var(--radius); background: none; color: var(--fg-2); cursor: pointer; } .sea-panel__close:hover { color: var(--fg); } .sea-panel__close:focus-visible { box-shadow: var(--focus-ring); } .sea-panel__zone, .sea-panel__season, .sea-panel__key, .sea-panel__source, .sea-panel__fresh, .sea-panel__sources, .sea-chip__pre { color: var(--fg-2); font-size: var(--text-caption); letter-spacing: var(--track-caption); } .sea-panel__badge { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-2); } .sea-panel__badge .sea-swatch { inline-size: 2.5rem; block-size: 2.5rem; } .sea-panel__badge-text { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; } .sea-panel__h { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-caption); letter-spacing: var(--track-caption); font-weight: var(--weight-emphasis); } .sea-panel__h-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .sea-panel__info { flex: none; margin: 0; } .sea-panel__chips { list-style: none; margin: 0 0 var(--space-1); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .sea-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; } .sea-chip__mark { font-weight: var(--weight-emphasis); } .sea-panel__details { inline-size: 100%; min-block-size: 44px; margin-block: var(--space-3) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-weight: var(--weight-emphasis); cursor: pointer; } .sea-panel__details:hover { background: var(--surface); } .sea-panel__details:focus-visible { box-shadow: var(--focus-ring); } .sea-panel__sources { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; } .sea-swatch { inline-size: 1.25rem; block-size: 1.25rem; flex: none; } .sea-swatch__ink { font-family: inherit; font-size: 10px; font-weight: var(--weight-emphasis); } .sea-swatch__ink--light { fill: var(--sea-ink-light); } .sea-swatch__ink--dark { fill: var(--sea-ink-dark); } .sea-key { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-caption); } .sea-key__item { display: inline-flex; align-items: center; gap: var(--space-1); } .sea-seasons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; } .sea-seasons--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); gap: var(--space-2); } .sea-seasons--grid li { display: flex; justify-content: center; } .sea-cell { display: inline-flex; flex-direction: column; align-items: center; border-radius: var(--radius-sm); } .sea-cell .sea-swatch { inline-size: 24px; block-size: 24px; } .sea-cell:focus-visible { outline: none; box-shadow: var(--focus-ring); } .sea-cell__year { font-size: var(--text-caption); font-variant-numeric: tabular-nums; color: var(--fg-2); } .sea-seasons__ticks { display: flex; justify-content: space-between; margin: var(--space-1) 0 0; font-size: var(--text-caption); font-variant-numeric: tabular-nums; color: var(--fg-2); } .sea-details { padding: 0; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--fg); box-shadow: var(--elev-raised); inline-size: min(42rem, calc(100% - 2 * var(--space-4))); max-block-size: calc(100% - 2 * var(--space-4)); overflow: hidden; } .sea-details[open] { display: flex; flex-direction: column; } .sea-details::backdrop { background: var(--scrim); } .sea-details__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-block-end: 1px solid var(--border-faint); } .sea-details__title { flex: 1; margin: 0; font-size: var(--text-body); line-height: 1.3; } .sea-details__back, .sea-details__close { flex: none; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; border: 0; border-radius: var(--radius); background: none; color: var(--fg-2); font: inherit; cursor: pointer; } .sea-details__back { display: none; padding: 0 var(--space-2); } .sea-details__back:hover, .sea-details__close:hover { color: var(--fg); } .sea-details__back:focus-visible, .sea-details__close:focus-visible { box-shadow: var(--focus-ring); } .sea-details__tabs { display: flex; gap: var(--space-1); padding: 0 var(--space-4); border-block-end: 1px solid var(--border-faint); overflow-x: auto; } .sea-details__tabs [role="tab"] { min-block-size: 44px; padding: 0 var(--space-3); border: 0; border-block-end: 2px solid transparent; background: none; color: var(--fg-2); font: inherit; cursor: pointer; white-space: nowrap; } .sea-details__tabs [role="tab"][aria-selected="true"] { color: var(--fg); border-block-end-color: var(--accent); font-weight: var(--weight-emphasis); } .sea-details__tabs [role="tab"]:focus-visible { box-shadow: var(--focus-ring); } .sea-details__body { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--space-4); font-size: var(--text-compact); } .sea-details__body p { margin: 0 0 var(--space-2); } .sea-details [role="tabpanel"][hidden] { display: none; } .sea-details__h { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-caption); letter-spacing: var(--track-caption); font-weight: var(--weight-emphasis); } .sea-details__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-3); } .sea-details__season { display: inline-flex; align-items: center; gap: var(--space-2); } .sea-details__select { min-block-size: 44px; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; } .sea-details__credits { list-style: none; margin: 0 0 var(--space-2); padding: 0; color: var(--fg-2); font-size: var(--text-caption); } .sea-details__pending, .sea-details__source, .sea-details__supplement, .sea-details__notice, .sea-details__credit-rzi, .sea-details__latest-note, .sea-details__latest-unit, .sea-details__stale, .sea-details__off-season, .sea-details__msg, .sea-panel__msg { color: var(--fg-2); font-size: var(--text-caption); } .sea-details__latest-value { display: inline-block; margin-inline-end: var(--space-3); font-variant-numeric: tabular-nums; } .sea-details a { color: inherit; } .sea-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .sea-seg__btn { min-block-size: 44px; padding: 0 var(--space-3); border: 0; background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; } .sea-seg__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-on); font-weight: var(--weight-emphasis); } .sea-seg__btn:focus-visible { box-shadow: inset var(--focus-ring); } @media (max-width: 672px) { .map-sea { inset-block-start: auto; inset-block-end: 0; inset-inline: 0; inline-size: auto; max-block-size: 70%; border-end-start-radius: 0; border-end-end-radius: 0; z-index: 6; } .sea-panel { padding-block-end: var(--space-2); } .sea-panel__h { margin-block-start: var(--space-2); } .sea-panel__badge .sea-swatch { inline-size: 2rem; block-size: 2rem; } .sea-panel__details { margin-block-start: var(--space-2); } .sea-panel p { margin-block-end: var(--space-1); } .sea-panel__badge { margin-block: var(--space-1); } .sea-panel .sea-key { margin-block-start: var(--space-1); } } @media (max-width: 672px) { .sea-details { inline-size: 100%; max-inline-size: none; block-size: 100%; max-block-size: none; border-radius: 0; } .sea-details__back { display: inline-flex; } .sea-details__close { display: none; } .sea-details__body { padding: var(--space-3); } } .place-host:not(:empty) { margin-block-end: var(--space-4); } .nearby-host { margin-block-end: var(--space-4); } .nearby > summary { display: flex; align-items: center; min-block-size: 44px; font-weight: var(--weight-emphasis); cursor: pointer; } .nearby > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } .nearby__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-2); } .nearby__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; inline-size: 100%; min-block-size: 44px; padding: var(--space-2) var(--space-3); text-align: start; font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); cursor: pointer; } .nearby__item:hover { background: var(--surface-2); } .nearby__item:focus-visible { outline: none; box-shadow: var(--focus-ring); } .nearby__name { font-weight: var(--weight-emphasis); } .nearby__place, .nearby__reading { color: var(--fg-2); font-size: var(--text-compact); } .nearby__more, .nearby__empty { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-compact); } .hex-tip { position: absolute; z-index: 3; pointer-events: none; max-inline-size: 90%; transform: translate(-50%, calc(-100% - 12px)); padding: var(--space-1) var(--space-2); font-size: var(--text-compact); color: var(--fg); background: var(--overlay-bg); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); white-space: nowrap; } .hex-tip--below { transform: translate(-50%, 12px); } .hex-tip[hidden] { display: none; } @media (min-width: 1024px) { .place-host.place-host--docked { visibility: hidden; block-size: 0; overflow: hidden; margin: 0; padding: 0; border: 0; } .place-host--docked .about-backdrop, .place-host--docked .about-sheet { visibility: visible; } } .sensor-panel { background: var(--bg); border: 0; box-shadow: var(--elev-raised); border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-size: var(--text-compact); letter-spacing: var(--track-compact); color: var(--fg); } .sensor-panel header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: none; padding: 0 0 var(--space-1); margin: 0 0 var(--space-1); } .panel-close { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; min-block-size: 24px; min-inline-size: 24px; } .panel-close__ico { flex: none; } .panel-star { display: inline-flex; align-items: center; justify-content: center; flex: none; min-inline-size: 2rem; min-block-size: 2rem; padding: 0; font-size: 1.25rem; line-height: 1; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; } .panel-star:hover { color: var(--fg); background: var(--surface-2); } .panel-star[aria-pressed="true"] { color: var(--fg); } .panel-star:focus-visible { outline: none; box-shadow: var(--focus-ring); } .map-dock__title, .map-sensor-sheet__title { flex: 1 1 auto; min-inline-size: 0; } @media (hover: none) { .sensor-panel { scroll-margin-block-start: calc(var(--masthead-h) + var(--space-2)); } .sensor-panel > header { position: sticky; inset-block-start: var(--masthead-h); z-index: 1; background: var(--bg); border-block-end: 1px solid var(--border-faint); padding-block: var(--space-2); margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); } .panel-star { min-block-size: 44px; min-inline-size: 44px; } .panel-close { min-block-size: 44px; min-inline-size: 44px; padding-inline: var(--space-3); border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--fg); } } .sensor-panel h2 { font-size: var(--text-card); font-weight: var(--weight-emphasis); line-height: 1.4; margin: 0; } .panel-flag { color: var(--muted); margin: 0 0 var(--space-2); } .sensor-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-2); margin: 0; } .sensor-panel dt { color: var(--fg-2); } .sensor-panel dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } .gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2) var(--space-3); margin: var(--space-2) 0; justify-items: center; } .sensor-panel .gauges .gauge, .map-sensor-sheet .gauges .gauge, .map-dock .gauges .gauge { position: static; display: block; inline-size: 100%; max-inline-size: 132px; block-size: auto; } .map-sensor-sheet { position: absolute; z-index: 4; inset-block-end: var(--space-2); inset-inline-end: var(--space-2); inline-size: 22rem; max-inline-size: calc(100% - 2 * var(--space-2)); max-block-size: calc(100% - 2 * var(--space-2)); overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-radius: var(--radius); box-shadow: var(--elev-raised); padding: var(--space-3) var(--space-4); color: var(--fg); font-size: var(--text-compact); letter-spacing: var(--track-compact); } .map-sensor-sheet:focus-visible { outline: none; box-shadow: var(--focus-ring); } .map-sensor-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .map-sensor-sheet__title { margin: 0; font-size: var(--text-card); font-weight: var(--weight-emphasis); line-height: 1.4; } .map-sensor-sheet__close { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--fg-2); cursor: pointer; } .map-sensor-sheet__close:hover { color: var(--fg); } .map-sensor-sheet__close:focus-visible { box-shadow: var(--focus-ring); } .map-sensor-sheet__close-ico { inline-size: 16px; block-size: 16px; } .map-sensor-sheet .gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); } .map-sensor-sheet .gauges .gauge { max-inline-size: 80px; } .map-sensor-sheet__history { display: inline-block; padding: var(--space-1) 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; } .map-sensor-sheet__history:focus-visible { box-shadow: var(--focus-ring); } .map-sensor-sheet__history[hidden] { display: none; } .map-dock { position: absolute; z-index: 4; inset-inline: var(--space-2); inset-block-end: var(--space-2); block-size: var(--map-dock-h); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "head head" "gauges gauges" "tools more" "plot plot"; gap: var(--space-1) var(--space-3); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--elev-float); padding: var(--space-2) var(--space-4) var(--space-3); color: var(--fg); font-size: var(--text-compact); letter-spacing: var(--track-compact); } .map-dock--folded { block-size: auto; grid-template-rows: auto auto; grid-template-areas: "head head" "gauges more"; } .map-dock:focus-visible { outline: none; box-shadow: var(--focus-ring); } .map-dock__grip { position: absolute; z-index: 1; inset-block-start: -10px; inset-inline-start: calc(50% - 2rem); inline-size: 4rem; block-size: 20px; border-radius: var(--radius-pill); cursor: ns-resize; touch-action: none; user-select: none; } .map-dock__grip::before { content: ""; position: absolute; inset-block-start: 8px; inset-inline: 0.75rem; block-size: 4px; border-radius: var(--radius-pill); background: var(--fg-2); opacity: 0.6; } .map-dock__grip:hover::before, .map-dock--resizing .map-dock__grip::before { opacity: 1; } .map-dock__grip:focus-visible { outline: none; box-shadow: var(--focus-ring); } .map-dock__grip[hidden] { display: none; } .map-dock--resizing { user-select: none; } .map-dock__head { grid-area: head; display: flex; align-items: center; gap: var(--space-2); padding-block-end: var(--space-2); border-bottom: 1px solid var(--border-faint); } .map-dock__title { margin: 0; font-size: var(--text-card); font-weight: var(--weight-emphasis); line-height: 1.4; } .map-dock__fold, .map-dock__close, .map-dock .panel-info { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--fg-2); cursor: pointer; } .map-dock__fold:hover, .map-dock__close:hover, .map-dock .panel-info:hover { color: var(--fg); background: var(--surface-2); } .map-dock__fold:focus-visible, .map-dock__close:focus-visible, .map-dock .panel-info:focus-visible, .map-dock__more:focus-visible { box-shadow: var(--focus-ring); } .map-dock__fold-ico, .map-dock__close-ico { inline-size: 16px; block-size: 16px; } .map-dock--folded .map-dock__fold-ico { transform: rotate(180deg); } .map-dock__body { grid-area: gauges; min-inline-size: 0; } .map-dock .gauges { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); justify-content: stretch; margin: 0; padding-block: var(--space-1); } .map-dock .gauges .gauge { max-inline-size: 96px; } .map-dock .panel-chart__dock { display: contents; } .map-dock .panel-chart__tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-inline-size: 0; } .map-dock .panel-chart__tools .btn, .map-dock .chart-field__control, .map-dock .panel-more { min-block-size: 2rem; } .map-dock .panel-chart__tools .btn { padding-block: 0; padding-inline: var(--space-3); font-size: var(--text-compact); } .map-dock .chart-field__control { font-size: var(--text-compact); } .map-dock .chart-field { display: contents; } .map-dock .chart-range { flex-basis: 100%; order: 1; margin-block-start: 0; } .map-dock .chart-range input { min-block-size: 2rem; } .map-dock .panel-chart__status { display: block; flex: 1 1 0; min-inline-size: 0; margin: 0; color: var(--fg-2); text-align: end; } .map-dock .panel-more { min-inline-size: 2rem; } .map-dock .colmenu__panel, .map-dock .panel-menu { inset-block-start: auto; inset-block-end: calc(100% + var(--space-1)); } .map-dock .panel-chart__dockplot { grid-area: plot; min-block-size: 0; min-inline-size: 0; display: flex; flex-direction: column; } .map-dock .chart-frame--fill { flex: 1 1 0; min-block-size: 0; overflow: hidden; } .map-dock .chart-message { flex: none; margin: var(--space-1) 0 0; } .map-dock--folded .panel-chart__tools, .map-dock--folded .panel-chart__dockplot { display: none; } .map-dock:not(.map-dock--folded) { container-type: size; grid-template-columns: fit-content(45%) minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head head more" "gauges tools tools" "gauges plot plot"; padding-block-end: var(--space-2); } .map-dock:not(.map-dock--folded) .map-dock__head { padding-block-end: var(--space-1); } .map-dock:not(.map-dock--folded) .map-dock__body { display: flex; flex-direction: column; } .map-dock:not(.map-dock--folded) .gauges { flex: 1 1 0; min-block-size: 0; overflow: hidden; padding: 0; justify-items: stretch; align-content: start; justify-content: start; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: max-content; grid-template-rows: repeat(3, 3rem); gap: var(--space-1) var(--space-2); } @container (min-height: 19.875rem) { .map-dock:not(.map-dock--folded) .gauges { grid-template-rows: repeat(5, 3.25rem); } } @media (hover: none) { @container (max-height: 20.6875rem) { .map-dock:not(.map-dock--folded) .gauges { grid-template-rows: repeat(3, 3rem); } } } .map-dock:not(.map-dock--folded) .gauges .gauge { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "arc label" "arc value"; align-items: center; justify-items: stretch; align-content: center; column-gap: var(--space-2); inline-size: auto; max-inline-size: none; min-block-size: 0; padding: 0 var(--space-2); border-inline-start: 3px solid transparent; border-radius: var(--radius-sm); text-align: start; } .map-dock:not(.map-dock--folded) .gauges .gauge:hover { background: var(--surface-2); } .map-dock:not(.map-dock--folded) .gauges .gauge--pick[aria-pressed="true"] { box-shadow: none; border-inline-start-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .map-dock:not(.map-dock--folded) .gauges .gauge--pick:focus-visible { box-shadow: var(--focus-ring); } .map-dock:not(.map-dock--folded) .gauge__svg { grid-area: arc; } .map-dock:not(.map-dock--folded) .gauge__label, .map-dock:not(.map-dock--folded) .gauge__value { text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .map-dock:not(.map-dock--folded) .gauge__label { grid-area: label; } .map-dock:not(.map-dock--folded) .gauge__value { grid-area: value; } .map-dock__more { grid-area: more; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); min-block-size: 2rem; border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-on); font: inherit; font-weight: var(--weight-emphasis); cursor: pointer; } .map-dock__area { grid-area: area; display: flex; align-items: center; gap: var(--space-2); justify-self: start; min-inline-size: 0; max-inline-size: 100%; min-block-size: 1.75rem; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--fg-2); font: inherit; cursor: pointer; text-align: start; } .map-dock__area:hover { color: var(--fg); background: var(--surface-2); } .map-dock__area:focus-visible { box-shadow: var(--focus-ring); } .map-dock__area[hidden] { display: none; } .map-dock__area span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .map-dock__area-ico { inline-size: 14px; block-size: 14px; flex: none; } .map-dock--area { grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "head head" "gauges gauges" "tools more" "plot plot" "area area"; } .map-dock--folded.map-dock--area { grid-template-rows: auto auto; grid-template-areas: "head head" "gauges more"; } .map-dock--folded .map-dock__area { display: none; } .map-dock--area:not(.map-dock--folded) { min-block-size: 16rem; } .map-dock--area:not(.map-dock--folded) { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "head head more" "gauges tools tools" "gauges plot plot" "area area area"; } @container (height < 21.875rem) { .map-dock--area:not(.map-dock--folded) .gauges { grid-template-rows: repeat(3, 3rem); } } @container (height >= 21.875rem) { .map-dock--area:not(.map-dock--folded) .gauges { grid-template-rows: repeat(5, 3.25rem); } } @media (hover: none) { @container (height <= 22.6875rem) { .map-dock--area:not(.map-dock--folded) .gauges { grid-template-rows: repeat(3, 3rem); } } } .map-dock__more:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .map-dock__more[hidden] { display: none; } .map-dock__more-ico { inline-size: 16px; block-size: 16px; flex: none; } .map-dock--folded .map-dock__more { justify-self: end; } .map-shell--docked .map-freshness { bottom: calc(12px + var(--map-panel-h, 0px)); } .map-shell.map-shell--docked .scale--onmap, .map-shell--docked .map-wind-label { inset-block-end: calc(3.5rem + var(--map-panel-h, 0px)); } .map-shell--docked .map-locate { bottom: calc(var(--space-2) + var(--map-panel-h, 0px)); } .map-shell--docked .maplibregl-ctrl-bottom-right, .map-shell--docked .maplibregl-ctrl-bottom-left { bottom: var(--map-panel-h, 0px); } .map-shell--crowded .map-dock { inset-inline-end: calc(var(--space-2) * 2 + 40px); } .map-shell--docked.map-shell--crowded .map-locate { bottom: var(--space-2); inset-inline-end: calc(var(--space-2) + 4px); } .map-shell--docked.map-shell--crowded .map-wind-label { inset-inline-end: calc(var(--space-2) * 2 + 40px); } @media (hover: none) { .map-dock__fold, .map-dock__close, .map-dock .panel-info, .map-dock__more { min-block-size: 44px; min-inline-size: 44px; } .map-dock .panel-chart__tools .btn, .map-dock .chart-field__control, .map-dock .chart-range input, .map-dock .panel-more { min-block-size: 44px; } .map-dock .panel-more { min-inline-size: 44px; } } .gauge__svg { inline-size: 100%; block-size: auto; } .gauge__track-path, .gauge__band { fill: none; stroke-width: 10; stroke-linecap: butt; } .gauge__track-path { stroke: var(--border-faint); } .gauge__band { opacity: 0.85; } .gauge__needle { stroke: var(--fg); stroke-width: 2.5; stroke-linecap: round; } .gauge__pivot { fill: var(--fg); } .gauge__value { font-weight: var(--weight-emphasis); font-variant-numeric: tabular-nums; text-align: center; } .gauge__label { color: var(--fg-2); font-size: var(--text-caption); letter-spacing: var(--track-caption); text-align: center; } .panel-details { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-faint); } .panel-details > summary { display: flex; align-items: center; min-block-size: 24px; font-size: var(--text-compact); font-weight: var(--weight-emphasis); color: var(--fg-2); cursor: pointer; } .panel-details[open] > summary { margin-bottom: var(--space-2); } .panel-details > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } .panel-details dd { color: var(--fg-2); } .panel-chart { margin-top: var(--space-4); } .panel-chart__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); } .chart-field { display: flex; flex-direction: column; gap: var(--space-1); color: var(--fg-2); } .chart-field__label { font-size: var(--text-compact); letter-spacing: var(--track-compact); } .chart-field__control { min-block-size: var(--control-height); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--accent); font: var(--weight-body) var(--text-body)/1 var(--font-body); padding: 0 var(--space-3); cursor: pointer; } .chart-field__control:hover { border-color: var(--accent); color: var(--accent-hover); } .chart-range input { min-block-size: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); padding: 0 var(--space-2); cursor: pointer; } .chart-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); } .chart-controls { align-items: flex-end; } .chart-reset { padding-inline: var(--space-3); } .chart-message { color: var(--fg-2); margin: var(--space-4) 0; } .chart-frame { inline-size: 100%; } .chart-frame--resizable { resize: vertical; overflow: hidden; block-size: 274px; min-block-size: 194px; border: 1px solid var(--border-faint); border-radius: var(--radius-sm); } .chart-frame--resizable .chart-host { block-size: 100%; } .chart-frame--fill { border: 1px solid var(--border-faint); border-radius: var(--radius-sm); } .chart-frame--fill, .chart-frame--resizable { position: relative; } .chart-frame--fill .chart-message, .chart-frame--resizable .chart-message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--space-3); text-align: center; color: var(--fg); } .chart-frame--fill .chart-host { block-size: 100%; } .chart-host .u-over { touch-action: pan-y; } .chart-tip { position: absolute; z-index: 3; pointer-events: none; inline-size: max-content; max-inline-size: 18rem; padding: var(--space-2) var(--space-3); background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-caption); line-height: 1.35; } .chart-tip[hidden] { display: none; } .chart-tip__value { font-size: var(--text-body); font-weight: 700; } .chart-tip__caption { color: var(--fg-2); } .chart-tip__row { display: flex; align-items: center; gap: var(--space-2); } .chart-tip__row--focus { font-weight: 700; } .chart-tip__swatch { flex: none; inline-size: 10px; block-size: 10px; border-radius: 2px; } .chart-tip__name { flex: 1; color: var(--fg-2); } .chart-tip__row--focus .chart-tip__name { color: var(--fg); } .chart-tip__num { margin-inline-start: var(--space-3); font-variant-numeric: tabular-nums; } .chart-tip--multi .chart-tip__caption { margin-block-end: var(--space-1); order: -1; } .chart-tip--multi { display: flex; flex-direction: column; } .chart-tip::after { content: ''; position: absolute; inset-inline-start: var(--tip-arrow); inline-size: 8px; block-size: 8px; background: var(--bg); border: 1px solid var(--border); transform: translateX(-50%) rotate(45deg); } .chart-tip[data-placement='above']::after { inset-block-end: -5px; border-block-start: 0; border-inline-start: 0; } .chart-tip[data-placement='below']::after { inset-block-start: -5px; border-block-end: 0; border-inline-end: 0; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } .data-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-8); color: var(--fg-2); font-size: var(--text-compact); letter-spacing: var(--track-compact); } .data-refresh__btn { display: inline-flex; align-items: center; gap: var(--space-2); } .data-refresh__ico { flex: none; } .data-refresh__status { color: var(--meta); font-variant-numeric: tabular-nums; } .map-freshness { position: absolute; z-index: 3; inset-inline-start: 12px; bottom: 12px; display: flex; align-items: center; gap: var(--space-2); } .map-shell .scale--onmap { inset-block-end: 3.5rem; max-inline-size: calc(100% - 7rem); background: var(--bg); box-shadow: var(--elev-raised); border-radius: var(--radius); padding: var(--space-1) var(--space-2); -webkit-text-stroke: 0; } .map-shell .scale--onmap[open] { inline-size: min(278px, calc(100% - 7rem)); z-index: 4; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--elev-float); max-block-size: calc(100% - 3.5rem - 12px - 32px - var(--space-2)); overflow-y: auto; } .scale--onmap .scale__bands--vertical { display: flex; flex-direction: row-reverse; block-size: auto; inline-size: 100%; padding-block-start: 16px; } .scale--onmap .scale__bands--vertical .scale__band { display: flex; flex-direction: column; align-items: flex-end; flex: 1 1 0; min-block-size: 0; } .scale--onmap .scale__bands--vertical .scale__band-swatch { block-size: 16px; inline-size: auto; min-block-size: 0; } .scale--onmap .scale__bands--vertical .scale__band-edge { position: static; inset-inline-start: auto; inset-block-start: auto; } .scale--onmap .scale__bands--vertical .scale__bar { inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 16px; background-image: var(--ramp-h, none); } .scale--onmap:not([open]) { padding-block: 0; padding-inline: var(--space-1); } .scale--onmap:not([open]) .scale__toggle { min-block-size: 44px; inline-size: auto; padding-inline: var(--space-1); margin-block-end: 0; } .scale--onmap:not([open]) .scale__toggle::after { content: ''; inline-size: 60px; block-size: 8px; border-radius: var(--radius-sm); background-image: var(--ramp-h, none); } .scale--onmap:not([open]) .scale__toggle-label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; white-space: normal; display: inline; margin-inline: var(--space-1); font-size: var(--text-compact); } @media (hover: none) { .scale--onmap .scale__toggle { min-block-size: 44px; min-inline-size: 44px; } } .map-freshness .data-refresh { margin: 0; background: var(--overlay-bg); border-radius: var(--radius); box-shadow: var(--elev-raised); padding: var(--space-1); gap: var(--space-1); } .data-refresh__btn--icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75rem; block-size: 1.75rem; padding: 0; background: none; border: 0; border-radius: var(--radius-sm); color: var(--fg-2); cursor: pointer; } .data-refresh__btn--icon:hover { color: var(--fg); background: var(--surface-2); } .data-refresh__btn--icon[aria-expanded="true"] { background: var(--fg); color: var(--bg); } .data-refresh__panel { inset-block-start: auto; inset-block-end: calc(100% + var(--space-2)); inset-inline-end: auto; inset-inline-start: 0; inline-size: max-content; max-inline-size: calc(100vw - var(--space-6)); min-inline-size: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .data-refresh__panel[hidden] { display: none; } .data-refresh__now { justify-content: center; min-block-size: 40px; } .data-refresh__group { display: flex; flex-direction: column; } .data-refresh__legend { margin: 0; padding: 0 0 var(--space-2); color: var(--fg-2); font-size: var(--text-caption); letter-spacing: var(--track-caption); } .data-refresh__group .colmenu__opt { white-space: nowrap; } .map-freshness:has(.data-refresh__panel:not([hidden])) { z-index: 7; } [data-island="switcher"] { min-block-size: var(--control-height); } [data-island="sensorbar"] { min-block-size: 102px; } [data-island="table"] { min-block-size: 88px; } .pager-slot { min-block-size: 57px; } @media (max-width: 900px) { [data-island="table"] { min-block-size: 160px; } } @media (max-width: 672px) { [data-island="table"] { min-block-size: 256px; } .pager-slot { min-block-size: 69px; } } .readouts { gap: var(--space-3); background: none; border-radius: 0; overflow: visible; box-shadow: none; } [data-island="readouts"] > div:not([hidden]) + .readouts { margin-top: var(--space-3); } .readout.card { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4); align-content: start; } .readout.card:has(.readout__group) { grid-template-rows: auto auto 1fr auto; } .readout.card .readout__value { display: inline-flex; align-items: baseline; gap: var(--space-1); } .readout__group { color: var(--fg-2); font-size: var(--text-caption); letter-spacing: var(--track-caption); } .readout.card { container-type: inline-size; } .readout.card > .readout__value { align-self: center; white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums; font-size: clamp(2rem, 36cqi, 5.5rem); } .readout.card > .readout__value .readout__unit { font-size: 0.4em; font-weight: var(--weight-body); color: var(--fg-2); } .gauge { position: relative; display: grid; place-items: center; inline-size: 108px; block-size: 108px; } .gauge__dial { inline-size: 100%; block-size: 100%; } .gauge__track { stroke: var(--border-faint); stroke-width: 3; } .gauge__arc { stroke-width: 3; stroke-linecap: round; } .gauge__figure { position: absolute; display: grid; justify-items: center; gap: 0; } .gauge__figure .readout__value { line-height: 1; } .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .embed { block-size: 100%; margin: 0; overflow: hidden; } html:has(> body.embed) { block-size: 100%; } .embed .map-shell { block-size: 100%; max-inline-size: none; } .embed .map { aspect-ratio: auto; min-block-size: 0; block-size: 100%; inline-size: 100%; } .embed .map-shell:has(.map--hero) { block-size: 100%; max-block-size: none; } .embed .map.map--hero { block-size: 100%; min-block-size: 0; max-block-size: none; } @media (max-width: 480px) { .embed .embed__footline { inset-block-end: calc(44px + var(--space-2) + var(--space-2)); } .embed .scale--onmap[open] { z-index: 5; } } .embed__switcher { position: absolute; z-index: 3; top: 12px; inset-inline-start: calc(12px + 32px + var(--space-2)); background: var(--overlay-bg); border-radius: var(--radius); box-shadow: var(--elev-raised); padding: var(--space-1) var(--space-2); } .embed .map-note { inset-inline-start: auto; inset-inline-end: calc(2rem + var(--space-2) + var(--space-2)); } .embed__footline { position: absolute; z-index: 4; bottom: var(--space-2); inset-inline-start: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-inline-size: 70%; } .embed__credit, .embed__attribution, .embed__reference { margin: 0; background: var(--overlay-bg); border-radius: 999px; box-shadow: var(--elev-raised); padding: var(--space-1) var(--space-3); font-size: var(--text-compact); letter-spacing: var(--track-compact); color: var(--fg); text-decoration: none; } .embed__credit { font-weight: var(--weight-emphasis); } .embed__credit:hover { text-decoration: underline; } .embed__credit:focus-visible { box-shadow: var(--focus-ring); } .embed__attribution a, .embed__reference a { color: inherit; text-decoration: none; } .embed__attribution a:hover, .embed__reference a:hover { text-decoration: underline; } .embed__attribution a:focus-visible, .embed__reference a:focus-visible { box-shadow: var(--focus-ring); } .area-summary__note { margin: 0; font-size: var(--text-compact); color: var(--fg-2); } .embed .map-locate { display: none; } .embed .maplibregl-ctrl-bottom-right { margin-inline-end: 0; } .embed__panel { position: absolute; z-index: 5; inset-block-end: 0; inset-inline: 0; max-block-size: 55%; overflow-y: auto; } .embed__panel:empty { display: none; } .embed__alt { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .scale__info { margin-block-start: var(--space-2); inline-size: 1.5rem; block-size: 1.5rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--overlay-bg); color: var(--fg); cursor: pointer; font: inherit; font-size: var(--text-caption); line-height: 1; } .scale__info::before { content: "i"; font-weight: var(--weight-emphasis); font-style: italic; } .scale__info:focus-visible { box-shadow: var(--focus-ring); } .scale--onmap > .scale__label:not([hidden]), .scale__sea-head, .scale__pollen-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: start; } :is(.scale__label, .scale__sea-head, .scale__pollen-head) > .scale__info { margin-block: -0.25rem; } .scale__info { position: relative; } .scale__info::after { content: ""; position: absolute; inset: 0; } .scaleinfo { position: relative; max-inline-size: 34rem; border: 0; border-radius: var(--radius); padding: var(--space-6); background: var(--bg); color: var(--fg); box-shadow: var(--elev-raised); } .scaleinfo::backdrop { background: var(--scrim); } .scaleinfo__title { margin: 0 0 var(--space-2); padding-inline-end: var(--space-6); font-size: var(--text-sub); font-weight: var(--weight-display); } .scaleinfo__dismiss { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); inline-size: 2rem; block-size: 2rem; border: 0; border-radius: var(--radius-sm); padding: 0; background: none; color: var(--fg-2); cursor: pointer; font: inherit; line-height: 1; } .scaleinfo__dismiss::before { content: "\00d7"; font-size: var(--text-sub); } .scaleinfo__dismiss:hover { color: var(--fg); } .scaleinfo__dismiss:focus-visible { box-shadow: var(--focus-ring); } .scaleinfo__notes { margin: 0 0 var(--space-4); color: var(--fg-2); } .scaleinfo__bands { margin: 0 0 var(--space-4); padding: 0; list-style: none; } .scaleinfo__band { display: grid; grid-template-columns: 1.25rem 1fr auto; gap: var(--space-3); align-items: center; padding-block: var(--space-1); border-block-end: 1px solid var(--border-faint); } .scaleinfo__swatch { inline-size: 1.25rem; block-size: 1rem; border-radius: var(--radius-sm); } .scaleinfo__band-range { color: var(--fg-2); font-variant-numeric: tabular-nums; } .scaleinfo__disclaimer { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--text-compact); } .scaleinfo__source { display: block; } .scaleinfo__close { display: block; margin-inline: auto; margin-block-start: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; } .scaleinfo__close:focus-visible { box-shadow: var(--focus-ring); } .scroll-cue { position: absolute; z-index: 3; inset-block-start: 100%; inset-inline-start: 50%; translate: -50% 0; display: grid; place-items: center; inline-size: 56px; block-size: 28px; padding: 0; color: var(--fg); text-decoration: none; -webkit-tap-highlight-color: transparent; } .scroll-cue::after { content: ''; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--border); border-block-start: 0; border-radius: 0 0 12px 12px; background: var(--bg); box-shadow: var(--elev-raised); clip-path: inset(0 -12px -12px -12px); } .scroll-cue::before { content: ''; position: absolute; inset: -12px -4px -12px; } .scroll-cue:focus-visible { outline: none; } .scroll-cue:focus-visible::after { box-shadow: var(--focus-ring); } .scroll-cue__chevron { animation: cue-bob 2.2s ease-in-out 0.3s 3 backwards; } .scroll-cue__chevron:first-child { animation-delay: 0s; } @keyframes cue-bob { 0%, 100% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(3px); opacity: 0.4; } } @media (hover: hover) { .scroll-cue { display: none; } } @media (hover: hover) { .map-shell:has(> .map--hero) .scroll-cue { display: grid; inset-block-start: auto; inset-block-end: 0; } .map-shell:has(> .map--hero) .scroll-cue::after { border-block-start: 1px solid var(--border); border-block-end: 0; border-radius: 12px 12px 0 0; clip-path: inset(-12px -12px 0 -12px); } .map-shell:has(> .map--hero) .scroll-cue::before { inset: -12px -4px 0; } } .map-shell:has(.map:fullscreen, .map--faux-full) .scroll-cue { display: none; } body:has(.sensor-panel, .map-sensor-sheet, .map-dock) .scroll-cue { display: none; } .map-shell:has(.scroll-cue) + .map-tier { margin-block-start: calc(28px + var(--space-1)); } @media (hover: hover) { .map-shell:has(.scroll-cue) + .map-tier { margin-block-start: var(--space-2); } } .back-to-top-sentinel { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 100svh; pointer-events: none; visibility: hidden; } .back-to-top { position: fixed; z-index: 5; inset-block-end: max(var(--space-3), env(safe-area-inset-bottom)); inset-inline-end: max(var(--space-3), env(safe-area-inset-right)); display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--fg); box-shadow: var(--elev-raised); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; } .back-to-top--visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease; } .back-to-top:focus-visible { outline: none; box-shadow: var(--focus-ring); } body:has(.map:fullscreen, .map--faux-full, .map-sensor-sheet) .back-to-top { display: none; } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } } .map-controls { position: absolute; z-index: 3; inset-block-start: var(--space-2); inset-inline-start: calc(12px + 32px + var(--space-2)); inset-inline-end: calc(var(--space-2) + 40px + var(--space-2)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); pointer-events: none; } .map-controls > * { pointer-events: auto; } .map-controls:has(.colmenu__panel:not([hidden])) { z-index: 7; } .map-controls__metric, .map-controls__find { min-block-size: 0; } .map-controls__metric { flex: none; } .map-controls__metric .btn { block-size: 40px; padding-inline: var(--space-3); background: var(--bg); border: 0; border-radius: var(--radius); box-shadow: var(--elev-raised); color: var(--fg); } .map-controls__metric .btn:hover { background: var(--surface-2); } .map-controls__find { flex: 0 1 20rem; min-inline-size: 0; } .map-controls__find .toolbar__find { flex: 1 1 auto; min-inline-size: 0; inline-size: 100%; } .map-controls__find .input { box-shadow: var(--elev-raised); border-color: transparent; } .map-controls__find .field__label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .map-shell:has(.map-controls) .map-note { inset-inline-start: 12px; top: calc(var(--space-2) + 40px + var(--space-2)); } @media (min-width: 672px) { .map-shell:has(> .map--hero) { max-inline-size: none; block-size: auto; max-block-size: none; } .map--hero { aspect-ratio: auto; block-size: calc(100svh - var(--masthead-h)); min-block-size: 22rem; max-block-size: none; } } @media (min-width: 672px) and (hover: none) { .map--hero { block-size: calc(100svh - var(--masthead-h) - 28px); } } @media (max-width: 672px) { .masthead { block-size: 48px; min-block-size: 48px; flex-wrap: nowrap; gap: var(--space-2); padding-block: 0; } .masthead__brand { flex: none; } .masthead__nav { gap: 0; flex-wrap: nowrap; } .masthead__link { padding-inline: var(--space-1); min-block-size: 44px; } .langpick__btn { padding-inline: var(--space-2); gap: var(--space-1); } @media (max-width: 480px) { .masthead__link--source, .masthead__link--about { display: none; } .langpick__extra { display: list-item; } .langpick__extra--first { border-block-start: 1px solid var(--border); margin-block-start: var(--space-1); padding-block-start: var(--space-1); } } .langpick__list { max-inline-size: calc(100vw - var(--space-4)); } @media (max-width: 360px) { .masthead { padding-inline: var(--space-2); gap: var(--space-1); } .langpick__btn { padding-inline: var(--space-1); } } .map-shell:has(.map--hero) { block-size: auto; max-block-size: none; } .map--hero { aspect-ratio: auto; block-size: calc(100svh - var(--masthead-h) - 1.5rem - 28px); min-block-size: 20rem; max-block-size: none; } .map--wide { block-size: calc(100svh - 15rem); min-block-size: 18rem; } @media (hover: none) { .map--wide { block-size: calc(100svh - var(--phone-chrome-area) - 28px); min-block-size: 52svh; } } @media (hover: none) { .frame:has(> .area-summary) { display: grid; grid-template-columns: minmax(0, 1fr); } .frame:has(> .area-summary) > .map-shell { inline-size: 100%; } } .map-freshness { position: absolute; inset-inline-start: var(--space-2); inset-block-end: calc(44px + var(--space-3) + var(--space-2)); margin: 0; display: flex; align-items: center; gap: var(--space-2); background: var(--overlay-bg); border-radius: var(--radius); box-shadow: var(--elev-raised); padding: 0 var(--space-1); } .map-freshness:has(.map-play--open) { inset-inline-end: var(--space-2); background: none; box-shadow: none; padding: 0; } .map-freshness:has(.map-play--open) .map-window { display: none; } .map-window__btn { background: none; box-shadow: none; } .map-play:not(.map-play--open) { background: none; box-shadow: none; padding: 0; } .map-window__footer { display: flex; gap: var(--space-2); border-block-start: 1px solid var(--border-faint); padding-block-start: var(--space-2); margin-block-start: var(--space-2); } .map-window__footer:empty { display: none; } .map-window__footer .data-refresh { flex-direction: column; align-items: flex-start; } .map-window__footer .data-refresh__panel { position: static; max-inline-size: 100%; padding: var(--space-2) 0 0; box-shadow: none; background: none; } .map-window__footer .data-refresh { margin: 0; background: none; box-shadow: none; padding: 0; } .map-shell .scale--onmap { position: absolute; inset-block-end: var(--space-2); inset-block-start: auto; inset-inline-start: var(--space-2); inset-inline-end: auto; z-index: 2; } .map__layers, .map__full, .map-locate, .map-zoom button, .map-wind-label__toggle { inline-size: 44px; block-size: 44px; min-block-size: 44px; } .scale__info::after { inset: -10px; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib-button { inline-size: 44px; block-size: 44px; min-block-size: 44px; background-repeat: no-repeat; background-position: center; } .maplibregl-ctrl-bottom-right { margin-inline-end: calc(var(--space-2) + 44px + var(--space-2)); margin-block-end: var(--space-2); } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-compact { position: relative; margin: 0; padding: 0; inline-size: 44px; block-size: 44px; min-block-size: 44px; background: none; box-sizing: border-box; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { position: absolute; inset-inline-end: 0; inset-block-end: calc(100% + var(--space-2)); inline-size: max-content; max-inline-size: max(9rem, calc(100vw - 7.5rem - 120px)); padding: var(--space-2) var(--space-3); line-height: 1.3; text-align: start; background: var(--bg); color: var(--fg); border-radius: var(--radius); box-shadow: var(--elev-raised); } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib a { color: var(--fg-2); } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib-button, .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button { background-image: none; background-color: var(--bg); box-shadow: var(--elev-raised); border-radius: var(--radius); color: var(--fg); padding: 0; text-align: center; line-height: 44px; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib-button::before { content: '©'; font-size: 1.25rem; } .map-wind-label { bottom: auto; inset-block-end: calc(var(--space-2) + 44px + var(--space-2)); inset-inline-end: var(--space-2); } .map-wind-label:not([open]) { inline-size: fit-content; max-inline-size: none; background: none; box-shadow: none; border: 0; padding: 0; } .map-wind-label__toggle::before { font-size: 1.25rem; } .map-wind-label:not([open]) .map-wind-label__toggle { display: flex; align-items: center; justify-content: center; background: var(--bg); box-shadow: var(--elev-raised); border-radius: var(--radius); } .map-wind-label[open] { z-index: 4; inset-inline-end: var(--space-2); inset-block-end: calc(var(--space-2) * 3 + 44px + 56px); max-inline-size: min(18rem, calc(100% - 4rem)); background: var(--bg); } .map-wind-label__toggle .map-wind-label__text-label { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .map-note { inset-inline-start: calc(12px + 44px + var(--space-2)); } .map-locate { bottom: var(--space-2); background: var(--bg); border-radius: var(--radius); } .map-locate-hint { --locate-hint-lift: 4rem; --locate-hint-arrow-inset: 15px; } .map-play { padding-inline: var(--space-1); flex-wrap: nowrap; } .map-play:not(.map-play--open) > :not(.map-play__btn) { display: none; } .map-play:not(.map-play--open) { block-size: 44px; } .map-play--open { block-size: 48px; flex: 1 1 auto; min-inline-size: 0; } .map-play--open .map-play__scrub { flex: 1 1 auto; inline-size: auto; min-inline-size: 0; } .map-play__note { max-inline-size: none; } .map-play__btn, .map-window__btn { inline-size: 44px; block-size: 44px; min-block-size: 44px; } .map-window__btn { inline-size: auto; min-inline-size: 44px; } .map-play__speed { inline-size: auto; min-inline-size: 44px; } .data-refresh__btn--icon { inline-size: 44px; block-size: 44px; } .page-head--compact { padding-block: var(--space-2); } .page-head--compact h1 { font-size: var(--text-sub); margin: 0; } .page-head .t-sub { font-size: var(--text-compact); line-height: 1.25rem; } .page-head:not(.page-head--compact) { padding-block: var(--space-2) var(--space-1); } .page-head:not(.page-head--compact) h1 { font-size: var(--text-sub); margin: 0; } h1 { font-size: var(--text-sub); } .map-controls { inset-inline-start: calc(12px + 44px + var(--space-2)); inset-inline-end: calc(var(--space-2) + 44px + var(--space-2)); } .map-controls__metric .btn { block-size: 44px; min-block-size: 44px; } .map-controls__find .input { min-block-size: 44px; } .map-shell:has(.map-controls) .map-note { top: calc(var(--space-2) + 44px + var(--space-2)); } .toolbar { flex-wrap: nowrap; align-items: center; gap: var(--space-2); padding-block-end: var(--space-2); } .toolbar__spacer { display: none; } .toolbar__find { flex: 1 1 auto; min-inline-size: 0; } .toolbar__find .field__label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .colmenu__legend { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .readout.card { padding: var(--space-2); } .readout .gauge, .sensor-panel .gauges .gauge { max-inline-size: 80px; } .readout .gauge { inline-size: 80px; block-size: 80px; } .readout__metric { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .readout__label, .readout__tier { font-size: var(--text-caption); max-inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); } .map-sensor-sheet { inset-block-end: 0; inset-inline: 0; inline-size: auto; max-inline-size: none; max-block-size: 45svh; border-end-start-radius: 0; border-end-end-radius: 0; } .map-sensor-sheet .gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); } .map-sensor-sheet__close, .map-sensor-sheet__history { min-block-size: 44px; min-inline-size: 44px; } .sensor-panel header { min-block-size: 48px; } .panel-close { min-block-size: 44px; } .map-tier { font-size: var(--text-caption); } .footer { padding-block: var(--space-6); margin-block-start: var(--space-8); } .footer p { font-size: var(--text-caption); } .footer a { display: inline-block; padding-block: var(--space-2); } } @media (orientation: landscape) and (max-height: 520px) and (hover: none) { .map-shell:has(.map--hero) { max-inline-size: none; block-size: auto; max-block-size: none; } .map--hero { aspect-ratio: auto; block-size: calc(100svh - 40px - 1.5rem - 28px); min-block-size: 12rem; max-block-size: none; } .map--wide { block-size: calc(100svh - 7rem - 28px); min-block-size: 12rem; } .masthead { block-size: 40px; min-block-size: 40px; } .sensor-panel { --masthead-h: 40px; } .masthead__link { min-block-size: 40px; } .frame:has(> .page-head--compact) { display: flex; align-items: center; gap: var(--space-3); } .page-head--compact { padding-block: 0; flex: none; } .page-head--compact h1 { font-size: var(--text-body); margin: 0; } .page-head .t-sub { font-size: var(--text-caption); } .frame:has(> .page-head--compact) .toolbar { flex: 1 1 auto; padding-block-end: 0; } .toolbar { flex-wrap: nowrap; align-items: center; gap: var(--space-2); padding-block-end: 0; } .toolbar__find .field__label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .frame:has(> [data-island="sensorbar"]), .frame:has(> .page-head:not(.page-head--compact)) { display: grid; grid-template-columns: max-content fit-content(12rem) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 48px auto; align-items: center; column-gap: var(--space-3); row-gap: var(--space-2); } .frame:has(> .page-head:not(.page-head--compact)) > nav { grid-row: 1; grid-column: 1; } .frame:has(> .page-head:not(.page-head--compact)) > .page-head:not(.page-head--compact) { grid-row: 1; grid-column: 2; } .frame:has(> .page-head:not(.page-head--compact)) > .toolbar { grid-row: 1; grid-column: 3; } .frame:has(> .page-head:not(.page-head--compact)) > [data-island="sensorbar"] { grid-row: 1; grid-column: 4; } [data-island="sensorbar"] { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; overflow: hidden; min-block-size: 0; } [data-island="sensorbar"] .sensor-bar { display: flex; align-items: center; margin-block: 0; } [data-island="sensorbar"] .switcher > legend { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } [data-island="sensorbar"] .switcher__set { flex-wrap: nowrap; } [data-island="sensorbar"] .switcher__opt span { white-space: nowrap; padding-inline: var(--space-2); font-size: var(--text-caption); } [data-island="sensorbar"] .meta { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } [data-island="switcher"] .colmenu { margin-block-start: var(--space-1); } .map-shell .scale--onmap { inset-block-end: var(--space-2); } .map-shell .scale--onmap[open] { max-block-size: calc(100% - var(--space-2) - 12px - 44px - var(--space-2)); overflow-y: auto; } .map-wind-label:not([open]) { inline-size: fit-content; max-inline-size: none; background: none; box-shadow: none; border: 0; padding: 0; } .map-wind-label__toggle::before { font-size: 1.25rem; } .map-wind-label:not([open]) .map-wind-label__toggle { display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; background: var(--bg); box-shadow: var(--elev-raised); border-radius: var(--radius); } .map-wind-label[open] { z-index: 4; max-inline-size: min(18rem, calc(100% - 4rem)); background: var(--bg); inset-block-end: calc(var(--space-2) * 3 + 44px + 56px); } .map-wind-label__toggle .map-wind-label__text-label { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .frame:has(> .page-head:not(.page-head--compact)) > .notice, .frame:has(> .page-head:not(.page-head--compact)) > .map-shell, .frame:has(> .page-head:not(.page-head--compact)) > .scroll-cue, .frame:has(> .page-head:not(.page-head--compact)) > #below-map, .frame:has(> .page-head:not(.page-head--compact)) > [id$="-alt"], .frame:has(> .page-head:not(.page-head--compact)) > .area-summary { grid-column: 1 / -1; } .page-head:not(.page-head--compact) { padding-block: 0; } .page-head:not(.page-head--compact) h1 { font-size: var(--text-body); margin: 0; } .page-head:not(.page-head--compact) p { display: none; } .map-freshness { inset-block-end: var(--space-2); inset-inline-start: calc(var(--space-2) + 14rem); } .readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sensor-panel { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-3); } .sensor-panel .chart { grid-column: 1 / -1; } .sensor-panel > header { grid-column: 1 / -1; } .gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (hover: none) and (pointer: coarse) { .map-zoom__btn[data-act="in"], .map-zoom__btn[data-act="out"] { display: none; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .map__layers .colmenu__panel, .map-shell .scale--onmap[open], .map-locate-hint__btn { background: var(--bg); } .map-locate-hint::after { background: var(--bg); } } @media (prefers-reduced-transparency: reduce) { .map__layers .colmenu__panel, .map-shell .scale--onmap[open], .map-locate-hint__btn { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .map-locate-hint::after { background: var(--bg); } } .panel-heading { min-inline-size: 0; } .panel-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; } .panel-sub, .panel-info, .panel-chart__phone, .panel-chart__status { display: none; } .gauge--pick { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; border-radius: var(--radius-sm); } .gauge__value, .gauge__label { display: block; } .gauge--pick:focus-visible { outline: none; box-shadow: var(--focus-ring); } .gauge--pick[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); } .gauge--pick[aria-pressed="true"]:focus-visible { box-shadow: var(--focus-ring); } .about-backdrop { position: fixed; inset: 0; z-index: 20; background: var(--scrim); } .about-sheet { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 21; max-block-size: 70svh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--fg); box-shadow: var(--elev-float); border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); padding: var(--space-2) var(--space-4) var(--space-6); font-size: var(--text-compact); letter-spacing: var(--track-compact); } .about-sheet:focus-visible { outline: none; } .about-sheet__grip { inline-size: 36px; block-size: 4px; margin: 0 auto var(--space-2); border-radius: 2px; background: var(--border); } .about-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-2); } .about-sheet__head h3 { margin: 0; font-size: var(--text-card); font-weight: var(--weight-emphasis); } .about-sheet__close { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--fg); cursor: pointer; } .about-sheet__network { margin: var(--space-3) 0 0; color: var(--fg-2); } .about-sheet dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; } .about-sheet dt { color: var(--fg-2); } .about-sheet dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; } @media (max-width: 672px) { .sensor-panel { padding: var(--space-1) var(--space-3) var(--space-3); } .sensor-panel > header { min-block-size: 0; padding-block: var(--space-1); margin-block-end: 0; } .sensor-panel > header { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); } .sensor-panel h2 { font-size: var(--text-body); line-height: 1.3; } .panel-heading { flex: 1 1 auto; } .panel-sub { display: block; margin: 0; color: var(--fg-2); font-size: var(--text-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-info, .sensor-panel .panel-close { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; padding: 0; border-radius: 50%; } .panel-info { border: 0; background: none; color: var(--fg-2); cursor: pointer; } .panel-info:focus-visible { outline: none; box-shadow: var(--focus-ring); } .panel-close__label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .panel-network, .panel-meta, .panel-details { display: none; } .sensor-panel .gauges { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: var(--space-1); margin: var(--space-1) 0; } .sensor-panel .gauges .gauge { max-inline-size: 72px; padding: var(--space-1) 0; } .sensor-panel .gauge__value { font-size: var(--text-caption); white-space: nowrap; } .sensor-panel .gauge__label { font-size: 11px; } .panel-chart { margin-block-start: var(--space-2); } .panel-chart__phone { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); } .panel-chart__status { display: block; margin: 0 0 var(--space-2); color: var(--fg-2); } .panel-chart__status:empty { display: none; } .panel-chart__controls:not(:has(.chart-range)) { display: none; } .panel-chart__controls { margin-block-end: var(--space-2); } .panel-chart__controls > .colmenu, .panel-chart__controls .chart-reset, .panel-chart__controls .chart-field__control, .panel-chart__controls .chart-field > .chart-field__label { display: none; } .panel-chart__controls .chart-range { margin-block-start: 0; } .period-seg { display: flex; flex: 1 1 auto; min-inline-size: 0; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-2); } .period-seg button { flex: 1 1 0; min-block-size: 38px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--fg); font: inherit; font-weight: var(--weight-emphasis); cursor: pointer; } .period-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-on); } .period-seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); } } .panel-morewrap { position: relative; flex: none; } .panel-more { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--fg); cursor: pointer; } .panel-more:focus-visible { outline: none; box-shadow: var(--focus-ring); } .panel-menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-1)); z-index: 10; min-inline-size: 15rem; padding: var(--space-1) 0; border-radius: var(--radius); background: var(--bg); box-shadow: var(--elev-float); border: 1px solid var(--border-faint); } .panel-menu__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); inline-size: 100%; min-block-size: 44px; padding: 0 var(--space-4); border: 0; background: none; color: var(--fg); font: inherit; text-align: start; cursor: pointer; } .panel-menu__item:hover, .panel-menu__item:focus-visible { background: var(--surface); outline: none; } .panel-menu__item[aria-disabled="true"] { color: var(--fg-2); opacity: .6; cursor: default; } .panel-menu__detail { color: var(--fg-2); font-size: var(--text-caption); } .panel-menu__sep { block-size: 1px; margin: var(--space-1) 0; background: var(--border-faint); } .panel-menu__opt { display: flex; align-items: center; gap: var(--space-3); min-block-size: 44px; padding: 0 var(--space-4); } .measure.about-page { max-inline-size: 96rem; } .about-page .page-head > p { max-inline-size: 80ch; } .about-section { padding-block: var(--space-8) 0; } .about-section--first { padding-block-start: 0; } .about-section > h2 { margin: 0 0 var(--space-3); } .about-section > p { color: var(--fg-2); max-inline-size: 80ch; margin: 0 0 var(--space-4); } .about-toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); } .about-toc a { font-size: var(--text-compact); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); color: var(--fg-2); } .about-toc a:hover { border-color: var(--accent); color: var(--accent); } .about-toc a.about-toc__sub { border-style: dashed; } .about-group { margin: var(--space-6) 0 var(--space-4); font-size: var(--text-card); font-weight: var(--weight-emphasis); scroll-margin-block-start: var(--space-4); } .about-values { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(max(13rem, calc((100% - 2 * var(--space-4)) / 3)), 1fr)); } .about-value { background: var(--bg); border: 1px solid var(--border-faint); border-radius: var(--radius); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; } .about-value__ico { inline-size: 28px; block-size: 28px; color: var(--accent); } .about-value__title { margin: 0; font-size: var(--text-card); font-weight: var(--weight-body); } .about-value p { margin: 0; color: var(--fg-2); font-size: var(--text-compact); letter-spacing: var(--track-compact); line-height: 1.4; } .about-goals { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); counter-reset: goal; } .about-goals li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-3); counter-increment: goal; } .about-goals li::before { content: counter(goal, decimal-leading-zero); font-size: var(--text-card); font-weight: var(--weight-display); color: var(--accent); font-variant-numeric: tabular-nums; } .about-goals strong { display: block; font-weight: var(--weight-emphasis); } .about-goals span { color: var(--fg-2); } .about-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); counter-reset: step; } .about-steps li { display: grid; gap: var(--space-2); align-content: start; counter-increment: step; } .about-steps h4 { margin: 0; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-card); font-weight: var(--weight-body); } .about-steps h4::before { content: counter(step); flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; font: var(--weight-emphasis) var(--text-compact)/1 var(--font-body); font-variant-numeric: tabular-nums; } .about-step__extra { display: grid; gap: var(--space-2); } .about-step__extra p { margin: 0; } .about-steps p { margin: 0; color: var(--fg-2); max-inline-size: 80ch; } .about-code { margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-sm); overflow-x: auto; font: var(--text-caption)/1.5 ui-monospace, monospace; color: var(--fg); } .about-code-wrap { position: relative; min-inline-size: 0; } .about-code-wrap--js .about-code { padding-block-start: var(--space-8); } .about-code__copy { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); min-block-size: 2rem; padding: 0 var(--space-3); font: inherit; font-size: var(--text-caption); color: var(--fg); background: var(--bg); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); cursor: pointer; } .about-code__copy:hover { border-color: var(--accent); } .about-code__copy:focus-visible { box-shadow: var(--focus-ring); } .about-shot { margin: 0; } .about-shot__img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--border-faint); border-radius: var(--radius); } .about-shot__img--dark { display: none; } :root[data-theme="dark"] .about-shot__img--light { display: none; } :root[data-theme="dark"] .about-shot__img--dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .about-shot__img--light { display: none; } :root:not([data-theme="light"]) .about-shot__img--dark { display: block; } } .about-step__text { display: grid; gap: var(--space-2); } @media (min-width: 672px) { .about-steps li { grid-template-columns: minmax(0, 1fr) clamp(22rem, 38%, 36rem); column-gap: var(--space-8); align-items: center; } .about-steps .about-step__text { grid-column: 1; grid-row: 1; } .about-steps .about-shot { grid-column: 2; grid-row: 1; } .about-steps .about-step__extra { grid-column: 1 / -1; } .about-steps li:nth-child(even) { grid-template-columns: clamp(22rem, 38%, 36rem) minmax(0, 1fr); } .about-steps li:nth-child(even) .about-step__text { grid-column: 2; } .about-steps li:nth-child(even) .about-shot { grid-column: 1; } } .about-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-block-end: var(--space-4); } .about-card { position: relative; background: var(--bg); border: 1px solid var(--border-faint); border-radius: var(--radius); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; } .about-card:hover, .about-card:focus-within { border-color: var(--accent); } .about-card__ill { inline-size: 100%; block-size: 7rem; color: var(--fg-2); margin-block-end: var(--space-2); } .about-card__ill .ill-fill { fill: var(--surface); } .about-card__ill .ill-warn { fill: var(--warn); } .about-card__ill .ill-dot { fill: currentColor; stroke: none; } .about-card__ill .ill-blade { stroke: currentColor; stroke-linecap: round; } .about-card__title { margin: 0; font-size: var(--text-card); font-weight: var(--weight-emphasis); } .about-card__title a { color: var(--accent); text-decoration: none; } .about-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .about-card__title a:focus-visible { outline: none; box-shadow: none; } .about-card__title a:focus-visible::after { box-shadow: var(--focus-ring); } .about-card__desc { color: var(--fg-2); font-size: var(--text-compact); letter-spacing: var(--track-compact); line-height: 1.4; } .about-section > p.about-card__note { font-size: var(--text-caption); color: var(--muted); } .about-promise { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--surface-sel); border-radius: var(--radius); padding: var(--space-4); margin-block-end: var(--space-4); } .about-promise svg { flex: none; color: var(--accent); } .about-promise p { margin: 0; } .storage-table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-compact); letter-spacing: var(--track-compact); margin-block-end: var(--space-4); } .storage-table th { text-align: start; font-weight: var(--weight-emphasis); color: var(--fg-2); padding: var(--space-2) var(--space-3) var(--space-2) 0; border-block-end: 1px solid var(--border); } .storage-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-block-end: 1px solid var(--border-faint); vertical-align: top; } .storage-table code { font-size: var(--text-caption); background: var(--surface); padding: 2px var(--space-1); border-radius: var(--radius-sm); overflow-wrap: anywhere; } .privacy-clear { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); } .privacy-clear p { margin: 0; color: var(--fg-2); font-size: var(--text-compact); } .privacy-clear [data-role="status"] { flex-basis: 100%; } .privacy-clear [data-role="status"]:empty { display: none; } @media (max-width: 671px) { .storage-table thead { display: none; } .storage-table tr { display: grid; gap: var(--space-1); padding-block: var(--space-2); border-block-end: 1px solid var(--border-faint); } .storage-table td { border: 0; padding: 0; } } .about-stats { background: var(--bg); border: 1px solid var(--border-faint); border-radius: var(--radius); padding: var(--space-4); display: grid; gap: var(--space-3); } .about-stats__title { margin: 0; font-size: var(--text-card); font-weight: var(--weight-body); } .about-stats__chart { min-block-size: 200px; } .about-stats__note { margin: 0; color: var(--fg-2); font-size: var(--text-compact); letter-spacing: var(--track-compact); line-height: 1.4; } .visitors-chart .u-legend { visibility: hidden; } .visitors-chart.is-live .u-legend { visibility: visible; } .about-links { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .about-links a { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); row-gap: var(--space-1); align-content: start; text-decoration: none; background: var(--bg); border: 1px solid var(--border-faint); border-radius: var(--radius); padding: var(--space-4); padding-inline-end: var(--space-8); color: var(--fg); } .about-links a:hover { border-color: var(--accent); } .about-links__icon { grid-row: 1 / span 2; inline-size: 1.5rem; block-size: 1.5rem; color: var(--accent); } .about-links__go { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-4); color: var(--accent); line-height: 1; } .about-links strong { font-weight: var(--weight-emphasis); color: var(--accent); } .about-links span:not(.about-links__go) { color: var(--fg-2); font-size: var(--text-compact); letter-spacing: var(--track-compact); } .about-back { margin-block-start: var(--space-8); } @media (max-width: 671px) { .about-values { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .about-value { padding: var(--space-3); } .about-value__title { font-size: var(--text-body); font-weight: var(--weight-emphasis); } } .footer__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto; align-items: start; } @media (min-width: 1024px) { .footer__grid { grid-template-columns: minmax(10rem, 1fr) repeat(3, max-content) auto; } } .footer .footer__wordmark { color: var(--fg); margin: 0 0 var(--space-2); } .footer .footer__tagline, .footer .footer__disclaimer { margin-block: 0 var(--space-2); } .footer__heading { margin: 0 0 var(--space-2); color: var(--fg); font: var(--weight-emphasis) var(--text-compact)/1.4 var(--font-body); } .footer__col ul, .footer__social { list-style: none; margin: 0; padding: 0; } .footer__col a, .footer__bar a { color: var(--fg-2); } .footer__lic { color: var(--fg-2); font-size: var(--text-caption); } .footer__social { display: flex; gap: var(--space-2); } .footer__social-link { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; } .footer .footer__social-link { padding-block: 0; } .footer__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border, currentColor); } .footer__bar p, .footer .footer__bar .footer__sponsor { margin: 0; } .footer__bar .footer__reference { flex-basis: 100%; } @media (max-width: 671px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .footer__brand, .footer__social { grid-column: 1 / -1; } .footer__col a { display: block; min-block-size: 44px; padding-block: var(--space-3); } .footer__bar { flex-direction: column; align-items: flex-start; gap: var(--space-1); } .footer__bar a { min-block-size: 44px; } } .map-orient { position: absolute; z-index: 3; inset-inline-end: var(--space-2); inset-block-start: calc(var(--space-2) * 2 + 48px + 122px); } @media (max-width: 672px) { .map-orient { inset-block-start: calc(var(--space-2) * 2 + 48px + 134px); } } @media (hover: none) and (pointer: coarse) { .map-orient { inset-block-start: calc(var(--space-2) * 2 + 48px + 44px); } } .map-orient__btn { display: grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--fg); box-shadow: var(--elev-raised); cursor: pointer; } @media (max-width: 672px) { .map-orient__btn { inline-size: 44px; block-size: 44px; } } .map-orient__btn:hover { background: var(--surface-2); } .map-orient__btn:focus-visible, .map-orient__close:focus-visible, .map-orient__north-btn:focus-visible, .map-orient__row input:focus-visible { box-shadow: var(--focus-ring); outline: none; } .map-orient__north { fill: var(--danger); } .map-orient__south { fill: currentColor; opacity: .55; } .map-orient__panel { position: absolute; inset-block-start: 0; inset-inline-end: calc(100% + var(--space-2)); inline-size: min(280px, calc(100vw - 96px)); box-sizing: border-box; display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--bg); color: var(--fg); border-radius: var(--radius); box-shadow: var(--elev-raised); } .map-orient__panel[hidden] { display: none; } .map-orient__head { display: flex; gap: var(--space-2); align-items: flex-start; } .map-orient__tip { margin: 0; flex: 1; font-size: var(--text-compact); line-height: 1.4; color: var(--fg-2); } .map-orient__close { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--fg-2); cursor: pointer; } .map-orient__close:hover { color: var(--fg); } .map-orient__row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-2); font-size: var(--text-compact); } .map-orient__row input { grid-column: 1 / -1; inline-size: 100%; margin: 0; accent-color: var(--accent); } .map-orient__north-btn { justify-self: start; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); font: inherit; font-size: var(--text-compact); cursor: pointer; } .map-orient__north-btn:hover { background: var(--surface-2); } @media (hover: none) { .map-orient__close, .map-orient__north-btn { min-block-size: 44px; min-inline-size: 44px; } } .combobox__credit { padding: var(--space-2) var(--space-4); font-size: var(--text-compact); color: var(--muted); } .combobox__credit a { color: inherit; text-decoration: underline; } .combobox__group { list-style: none; margin: 0; padding: 0; } .combobox__group-label { padding: var(--space-2) var(--space-4) var(--space-1); font-size: var(--text-compact); font-weight: 600; color: var(--muted); } li:has(> .combobox__group) + li:has(> .combobox__group) { border-block-start: 1px solid var(--border); } .combobox__opt--address { border-block-start: 1px solid var(--border); } .address-pin { inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: var(--elev-float); } .map-controls__find .combobox__list { max-block-size: min(26rem, 60vh); } .sea-chart { margin: 0 0 var(--space-3); } .sea-chart__svg { display: block; inline-size: 100%; block-size: auto; } .sea-chart__band--within { fill: var(--sea-band-within); } .sea-chart__band--between { fill: var(--sea-band-between); } .sea-chart__band--above { fill: var(--sea-band-above); } .sea-chart__grid { stroke: var(--border-faint); stroke-width: 0.5; } .sea-chart__limit { stroke: var(--fg-2); stroke-width: 1; stroke-dasharray: 4 3; } .sea-chart__tick, .sea-chart__limit-label { font-size: 9px; fill: var(--fg-2); font-variant-numeric: tabular-nums; } .sea-chart__dot { fill: var(--fg); stroke: var(--fg); stroke-width: 1.5; } .sea-chart__dot--below, .sea-chart__key-dot { fill: var(--bg); } .sea-chart__key-dot { stroke: var(--fg); stroke-width: 1.5; } .sea-chart__unit { margin: 0; font-size: var(--text-caption); color: var(--fg-2); } .sea-chart__empty, .sea-chart__credit { margin: 0 0 var(--space-2); font-size: var(--text-caption); color: var(--fg-2); } .sea-chart__legend { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-caption); } .sea-chart__legend li { display: flex; align-items: center; gap: var(--space-2); } .sea-chart__swatch { inline-size: 12px; block-size: 12px; flex: none; } .sea-chart__swatch .sea-chart__band--within { stroke: var(--border); stroke-width: 2; } .sea-chart__table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--text-compact); } .sea-chart__table caption { text-align: start; color: var(--fg-2); padding-block-end: var(--space-1); } .sea-chart__table th, .sea-chart__table td { padding: var(--space-1); border-block-end: 1px solid var(--border-faint); text-align: end; } .sea-chart__table th[scope="row"], .sea-chart__table thead th:first-child { text-align: start; font-weight: normal; } .sea-chart__pre { color: var(--fg-2); font-size: var(--text-caption); } .sea-chart__toggle { min-block-size: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-size: var(--text-compact); cursor: pointer; } .sea-chart__toggle:hover { background: var(--surface); } .sea-chart__toggle:focus-visible { box-shadow: var(--focus-ring); }