* { 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); } .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); } .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); } @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); } .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; } #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); } .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); } .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 { display: none; } .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--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-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); } .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::-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); } .place-host:not(:empty) { margin-block-end: var(--space-4); } .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; } .panel-close__ico { flex: none; } @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-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 { 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); } .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 { 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%; } @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; } .scale--onmap[open] { 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-inline: var(--space-2); } .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__auto, .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__auto:hover, .data-refresh__btn--icon:hover { color: var(--fg); background: var(--surface-2); } .data-refresh__auto[aria-checked="true"] { color: var(--accent); } [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 > .readout__value { font-size: var(--text-page); } .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; } .masthead__brand .tld { display: none; } .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 { 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 { color: inherit; text-decoration: none; } .embed__attribution a:hover { text-decoration: underline; } .embed__attribution a:focus-visible { box-shadow: var(--focus-ring); } .embed .scale--onmap { inset-block-end: 3.5rem; } .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); } .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: 20px; 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 1.8s ease-in-out 3; } @keyframes cue-bob { 50% { transform: translateY(3px); } } @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; } .map-shell:has(.scroll-cue) + .map-tier { margin-block-start: calc(20px + var(--space-1)); } @media (hover: hover) { .map-shell:has(.scroll-cue) + .map-tier { margin-block-start: var(--space-2); } } .back-to-map { position: fixed; z-index: 6; 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-map--visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease; } .back-to-map:focus-visible { outline: none; box-shadow: var(--focus-ring); } @media (hover: hover) { .back-to-map { display: none; } } .map-shell:has(.map:fullscreen, .map--faux-full) ~ .back-to-map { display: 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)); } .map-shell:has(.map:fullscreen, .map--faux-full) .map-controls { display: none; } @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) - 20px); } } @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; } @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)); } .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 - 20px); 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) - 20px); min-block-size: 55svh; } } @media (hover: none) { .frame:has(> .area-summary) { display: grid; grid-template-columns: minmax(0, 1fr); } .frame:has(> .area-summary) > .map-shell { inline-size: 100%; } } .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); } .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 { 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; 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: calc(100% - 7rem); z-index: 4; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .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 { display: inline; margin-inline: var(--space-1); font-size: var(--text-compact); } .map__layers, .map__full, .map-locate, .map-zoom button, .scale__info, .map-wind-label__toggle { inline-size: 44px; block-size: 44px; min-block-size: 44px; } .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-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__auto, .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; } .toolbar__refresh .btn__label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .toolbar__refresh .btn { min-inline-size: 48px; padding-inline: 0; justify-content: center; } .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 - 20px); min-block-size: 12rem; max-block-size: none; } .map--wide { block-size: calc(100svh - 7rem - 20px); 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, .toolbar__refresh .btn__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 max-content 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; } .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 { display: inline; margin-inline: var(--space-1); font-size: var(--text-compact); } .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] { background: var(--bg); } } @media (prefers-reduced-transparency: reduce) { .map__layers .colmenu__panel, .map-shell .scale--onmap[open] { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } } .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); } } .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: 60ch; 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-values { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 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 li::before { content: counter(step); font-size: var(--text-caption); letter-spacing: var(--track-caption); color: var(--meta); } .about-steps h3 { margin: 0; font-size: var(--text-card); font-weight: var(--weight-body); } .about-steps p { margin: 0; color: var(--fg-2); max-inline-size: 60ch; } .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-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; } } @media (min-width: 672px) { .about-steps li { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: var(--space-6); } .about-steps li > :not(.about-shot) { grid-column: 1; } .about-steps .about-shot { grid-column: 2; grid-row: 1 / span 5; } } .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 { display: grid; gap: var(--space-1); text-decoration: none; background: var(--bg); border: 1px solid var(--border-faint); border-radius: var(--radius); padding: var(--space-4); color: var(--fg); } .about-links a:hover { border-color: var(--accent); } .about-links strong { font-weight: var(--weight-emphasis); color: var(--accent); } .about-links span { 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; } .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; } @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; } }