@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/google-sans-flex-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-symbols-rounded-v4.woff2") format("woff2");
}

:root {
  --brand-black: #000000;
  --brand-citron: #c8b744;
  --brand-gray: #545450;
  --brand-lavender: #7c5174;
  --brand-orange: #ef7e1f;
  --brand-white: #ffffff;
  --forecast-adjusted-color: #c58a10;
  --forecast-day-shade: rgba(240, 218, 89, 0.2);
  --forecast-night-shade: rgba(84, 68, 96, 0.14);
  --md-sys-color-primary: #75536e;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #fbd8f3;
  --md-sys-color-on-primary-container: #2d1229;
  --md-sys-color-secondary: #686021;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #f0e696;
  --md-sys-color-on-secondary-container: #211f00;
  --md-sys-color-surface: #fff8fc;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fbf2f8;
  --md-sys-color-surface-container: #f5ecf2;
  --md-sys-color-surface-container-high: #efe6ec;
  --md-sys-color-surface-container-highest: #e9e0e6;
  --md-sys-color-on-surface: #211a1f;
  --md-sys-color-on-surface-variant: #4f444c;
  --md-sys-color-outline: #81747d;
  --md-sys-color-outline-variant: #d3c2cc;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-shape-small: 0.75rem;
  --md-sys-shape-medium: 1rem;
  --md-sys-shape-large: 1.5rem;
  --md-sys-shape-extra-large: 1.75rem;
  --md-sys-shape-full: 999px;
  --md-sys-elevation-1: 0 0.08rem 0.18rem rgba(33, 26, 31, 0.18), 0 0.18rem 0.5rem rgba(33, 26, 31, 0.1);
  --md-sys-elevation-2: 0 0.15rem 0.4rem rgba(33, 26, 31, 0.18), 0 0.45rem 1.1rem rgba(33, 26, 31, 0.12);
  --md-sys-elevation-3: 0 0.35rem 0.8rem rgba(33, 26, 31, 0.2), 0 0.8rem 2rem rgba(33, 26, 31, 0.16);
  --surface-muted: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-family: "Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "ROND" 20;
  line-height: 1.25;
  background: var(--md-sys-color-surface);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.material-symbols-rounded {
  display: inline-block;
  overflow: hidden;
  font-family: "Material Symbols Rounded";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "liga";
  font-variation-settings: normal;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
}

/* keep the staged android update outside dashboard rerenders */
.hosted-update-prompt {
  position: fixed;
  z-index: 1000;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 1rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-medium);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  box-shadow: var(--md-sys-elevation-3);
}

.hosted-update-prompt p {
  flex: 1 1 14rem;
  margin: 0;
}

.hosted-update-prompt button {
  min-height: 2.75rem;
}

.hosted-update-prompt progress {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
  accent-color: var(--md-sys-color-primary);
}

/* readable standalone privacy policy */
.privacy-page {
  width: min(100%, 44rem);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.privacy-page header {
  margin-top: 2.5rem;
}

.privacy-page h1 {
  margin: 0.5rem 0;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.15;
}

.privacy-page h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.privacy-page a {
  color: var(--md-sys-color-primary);
  text-underline-offset: 0.2em;
}

.privacy-page a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.privacy-intro {
  font-size: 1.15rem;
}

.privacy-updated {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
}

/* framed admin sign-in page */
.admin-login-body {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand-citron) 34%, transparent), transparent 38%),
    var(--md-sys-color-surface);
}

.admin-login-shell {
  width: min(100%, 27rem);
}

.admin-login-card {
  padding: clamp(1.5rem, 6vw, 2.25rem);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-extra-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-2);
}

.admin-login-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.1rem;
  place-items: center;
  border-radius: 50%;
  color: var(--brand-black);
  background: var(--brand-citron);
  font-size: 2rem;
}

.admin-login-card h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 2.8rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.admin-login-intro {
  margin: 0.75rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.9rem;
  line-height: 1.5;
}

.admin-login-error {
  margin: 1rem 0 0;
  padding: 0.75rem;
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-error);
  background: var(--md-sys-color-error-container);
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-login-form {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.admin-login-form label {
  display: grid;
  gap: 0.3rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-login-form input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  font: inherit;
  font-size: 1rem;
}

.admin-login-form input:focus-visible {
  outline: 0.18rem solid color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent);
  outline-offset: 0.08rem;
}

.admin-login-form button {
  margin-top: 0.25rem;
  border: 0;
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.admin-login-form button:hover,
.admin-login-form button:focus-visible {
  box-shadow: var(--md-sys-elevation-1);
}

.admin-login-back {
  display: block;
  width: fit-content;
  margin: 1.1rem auto 0;
  color: var(--md-sys-color-primary);
  font-size: 0.78rem;
  font-weight: 700;
}

button,
input,
select {
  min-height: 2.75rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-small);
  color: inherit;
  background: var(--md-sys-color-surface-container-lowest);
  font: inherit;
}

button {
  padding: 0.65rem 1.15rem;
  border-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  box-shadow: none;
  cursor: pointer;
  font-weight: 650;
  font-variation-settings: "ROND" 35;
  letter-spacing: 0.01em;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary));
  background: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary));
  box-shadow: var(--md-sys-elevation-1);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

a {
  color: var(--md-sys-color-primary);
}

:focus-visible {
  outline: 3px solid var(--brand-citron);
  outline-offset: 2px;
}

.shell {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  column-gap: 1rem;
  width: min(78rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.5rem 0;
}

/* give sticky weather headers the viewport while retaining centered content tracks */
.shell:has(> :is(.home-masthead, .forecast-masthead)) {
  --weather-page-gutter: max(1rem, calc((100% - 78rem) / 2));

  grid-template-columns: var(--weather-page-gutter) 5.75rem minmax(0, 1fr) var(--weather-page-gutter);
  column-gap: 0;
  width: 100%;
}

/* align full-width header controls with the existing content edges */
.shell:has(> :is(.home-masthead, .forecast-masthead)) > .masthead {
  padding-inline: var(--weather-page-gutter);
}

/* retain the desktop rail and its gap inside the centered content tracks */
.shell:has(> :is(.home-masthead, .forecast-masthead)) > .section-nav {
  grid-column: 2;
}

.shell:has(> :is(.home-masthead, .forecast-masthead)) > .weather-content {
  grid-column: 3;
  margin-left: 1rem;
}

.masthead {
  --masthead-title-size: clamp(2.2rem, 5vw, 3.5rem);
  /* match the complete forecast range including its padding and border */
  --forecast-range-button-height: 2.35rem;
  --forecast-range-padding: 0.25rem;
  --adjustment-switch-height: calc(var(--forecast-range-button-height) + var(--forecast-range-padding) * 2 + 2px);

  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  position: relative;
  padding: 0.5rem 0 0.65rem;
}

.masthead h1 {
  max-width: none;
  margin: 0;
  font-size: var(--masthead-title-size);
  white-space: nowrap;
}

.masthead-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* retain page controls above scrolling weather content */
.home-masthead,
.forecast-masthead {
  align-self: start;
  position: sticky;
  z-index: 25;
  top: env(safe-area-inset-top, 0px);
  background: var(--md-sys-color-surface);
}

/* fit the title independently of the shared control height */
.home-masthead {
  --masthead-content-height: max(2.5rem, var(--masthead-title-size));
}

.home-masthead .masthead-actions {
  flex-shrink: 0;
}

.home-masthead h1 {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: var(--masthead-content-height);
  font-size: var(--masthead-title-size);
  line-height: 1;
}

.masthead-title-text {
  display: block;
  white-space: nowrap;
}

/* keep the forecast range beside the adjustment control */
.forecast-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.forecast-masthead h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* match the forecast handle while retaining the complete control height */
.forecast-adjustment-toggle {
  --adjustment-thumb-size: var(--forecast-range-button-height);

  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: max(44px, calc(var(--adjustment-switch-height) * 1.75));
  min-height: var(--adjustment-switch-height);
  padding: 0;
  border: 0;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  box-shadow: none;
}

.forecast-adjustment-toggle:hover:not(:disabled) {
  color: var(--md-sys-color-on-surface);
  background: transparent;
  box-shadow: none;
}

.forecast-adjustment-toggle-track {
  display: flex;
  align-items: center;
  width: calc(var(--adjustment-switch-height) * 1.75);
  height: var(--adjustment-switch-height);
  /* share the forecast switch inset and border in both states */
  padding: var(--forecast-range-padding);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-full);
  background: var(--md-sys-color-surface-container-highest);
  transition: background-color 160ms ease, border-color 160ms ease;
}

/* move immediately so responsive resizing never animates obsolete thumb geometry */
.forecast-adjustment-toggle-thumb {
  display: grid;
  flex: 0 0 var(--adjustment-thumb-size);
  place-items: center;
  width: var(--adjustment-thumb-size);
  height: var(--adjustment-thumb-size);
  border-radius: var(--md-sys-shape-full);
  background: var(--brand-white);
  box-shadow: 0 1px 2px rgb(48 36 44 / 20%);
}

/* keep a smaller centered sparkle with room inside the thumb at every size */
.forecast-adjustment-sparkle {
  width: min(18px, calc(var(--adjustment-thumb-size) * 0.7));
  height: min(18px, calc(var(--adjustment-thumb-size) * 0.7));
  color: #77747c;
}

.forecast-adjustment-toggle[aria-checked="true"] .forecast-adjustment-toggle-track {
  background: linear-gradient(135deg, #bd9130 0%, #d9b555 35%, #e6cd89 50%, #d4ac45 70%, #bd9130 100%);
}

/* keep the sparkle solid against the muted gold highlight */
.forecast-adjustment-toggle[aria-checked="true"] .forecast-adjustment-sparkle {
  color: var(--forecast-adjusted-color);
}

.forecast-adjustment-toggle[aria-checked="true"] .forecast-adjustment-toggle-thumb {
  transform: translateX(calc(var(--adjustment-switch-height) * 0.75));
}

.weather-content {
  grid-column: 2;
  min-width: 0;
}

.section-nav {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  position: sticky;
  /* keep the desktop rail below a pinned weather header */
  top: calc(var(--weather-sticky-header-height, 0px) + 1rem);
  width: 100%;
  gap: 0.25rem;
  padding: 0.65rem 0.4rem;
  border-radius: var(--md-sys-shape-extra-large);
  background: var(--md-sys-color-surface-container);
}

/* align the desktop rail with visible content without moving the content */
@media (width > 42rem) {
  /* match current cards, alerts and feedback */
  .shell:has(> .weather-content > :is(.current-conditions, .alert-list, .notice):first-child) > .section-nav {
    margin-top: 1rem;
  }

  /* match panel spacing while keeping settings at its existing aligned position */
  .shell:has(> .weather-content > .panel:first-child) > .section-nav {
    margin-top: 1.2rem;
  }
}

.section-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  min-height: 4.5rem;
  padding: 0.35rem 0.15rem;
  border: 0;
  border-radius: var(--md-sys-shape-medium);
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.section-nav a:hover {
  color: var(--md-sys-color-on-surface);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

.section-nav a[aria-current="page"] {
  color: var(--md-sys-color-on-surface);
  background: transparent;
  text-decoration: none;
}

.section-nav-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 2rem;
  border-radius: var(--md-sys-shape-full);
  transition: background-color 160ms ease, color 160ms ease;
}

.section-nav a:hover .section-nav-icon {
  background: var(--md-sys-color-surface-container-highest);
}

.section-nav a[aria-current="page"] .section-nav-icon {
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
}

.section-nav .material-symbols-rounded {
  font-size: 1.4rem;
}

/* preserve the weather artwork inside the existing navigation indicator without a shadow */
.section-nav-weather-icon {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

/* reserve the artwork footprint while the first current observation loads */
.section-nav-weather-icon.section-nav-weather-skeleton {
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
}

.secondary-button {
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
  background: transparent;
}

.settings-page,
.unit-settings-page {
  width: min(46rem, 100%);
}

.settings-destinations {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.settings-logs-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 4.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--md-sys-shape-large);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container);
  text-decoration: none;
}

.settings-logs-link:hover {
  background: var(--md-sys-color-surface-container-high);
  text-decoration: none;
}

.settings-logs-link > span:last-child {
  display: grid;
  gap: 0.15rem;
}

.settings-logs-link small {
  color: var(--md-sys-color-on-surface-variant);
}

.settings-destination-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
}

.unit-settings-form {
  margin-top: 1rem;
}

.unit-settings-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.unit-settings-heading .eyebrow {
  margin-bottom: 0.45rem;
}

.unit-settings-intro {
  margin: 0.65rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.5;
}

.unit-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.unit-settings-grid label {
  display: grid;
  gap: 0.4rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.76rem;
  font-weight: 700;
}

.unit-settings-grid select {
  min-width: 0;
  width: 100%;
  padding: 0.55rem 0.7rem;
}

.unit-settings-actions {
  justify-content: flex-start;
  margin-top: 1rem;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: inherit;
  font-weight: 650;
  font-variation-settings: "ROND" 35;
}

h1 {
  max-width: 12ch;
  margin-bottom: 0.7rem;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.eyebrow {
  margin-bottom: 0.65rem;
  color: var(--md-sys-color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lede {
  max-width: 38rem;
  margin-bottom: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.95rem;
  line-height: 1.45;
}

.panel {
  margin-top: 1.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.notice {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 0.35rem solid var(--brand-citron);
  border-radius: var(--md-sys-shape-small);
  background: var(--md-sys-color-secondary-container);
}

.notice.error {
  border-color: var(--md-sys-color-error);
  color: var(--md-sys-color-error);
  background: var(--md-sys-color-error-container);
}

.section-heading,
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* current condition cards */
.current-conditions {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.condition-card {
  position: relative;
  grid-column: span 3;
  min-width: 0;
  min-height: 8.5rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
  isolation: isolate;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.condition-color {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.condition-card-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0.85rem 1rem;
}

.condition-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.condition-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.35rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.condition-label .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--md-sys-color-on-surface);
  font-size: 1.15rem;
}

.condition-status {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0.28rem 0.5rem;
  border: 0;
  border-radius: var(--md-sys-shape-full);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.condition-status-color {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.condition-status-dark {
  color: var(--brand-black);
}

.condition-status-light {
  color: #ffffff;
}

.condition-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: stretch;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.condition-live {
  min-width: 0;
}

.condition-primary strong,
.condition-secondary strong {
  display: block;
  font-family: inherit;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 0.95;
  white-space: nowrap;
}

.condition-primary strong {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
}

.condition-primary small,
.condition-secondary small {
  margin-left: 0.2rem;
  font-family: inherit;
  font-size: 0.28em;
  font-weight: 650;
}

.condition-secondary {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.65rem;
}

.condition-secondary > span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.condition-secondary > span::after {
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--md-sys-color-outline) 36%, transparent);
  content: "";
}

.condition-secondary strong {
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  text-align: left;
}

.condition-detail {
  margin: auto 0 0;
  padding-top: 0.65rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.condition-forecast {
  display: grid;
  gap: 0.25rem;
  margin-bottom: -0.2rem;
  padding-bottom: 0.2rem;
  color: var(--brand-black);
  text-align: right;
}

.condition-forecast-readings {
  display: grid;
  gap: 0.18rem;
}

.condition-forecast-reading {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.28rem;
  opacity: 0.75;
  white-space: nowrap;
}

.condition-forecast-tone-blue {
  color: rgb(56, 120, 197);
}

.condition-forecast-tone-burgundy {
  color: rgb(114, 30, 52);
}

.condition-forecast-tone-gold {
  color: rgb(200, 183, 68);
}

.condition-forecast-tone-gray {
  color: rgb(84, 84, 80);
}

.condition-forecast-tone-green {
  color: rgb(67, 151, 86);
}

.condition-forecast-tone-neutral {
  color: var(--brand-black);
}

.condition-forecast-tone-orange {
  color: rgb(239, 126, 31);
}

.condition-forecast-tone-purple {
  color: rgb(124, 81, 116);
}

.condition-forecast-tone-red {
  color: rgb(207, 67, 55);
}

.condition-forecast-tone-yellow {
  color: rgb(230, 181, 25);
}

.condition-forecast-label {
  font-size: 0.58rem;
  font-weight: 650;
}

.condition-forecast strong {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}

.condition-forecast strong small {
  font-size: 0.58em;
  font-weight: 650;
  letter-spacing: 0;
}

.condition-card[data-condition="tide"] .condition-forecast-reading {
  display: grid;
  gap: 0.05rem;
}

.wind-condition .condition-forecast,
.wind-condition .condition-forecast-readings,
.rain-condition .condition-forecast,
.rain-condition .condition-forecast-readings,
.tide-condition .condition-forecast,
.tide-condition .condition-forecast-readings {
  height: 100%;
}

.wind-condition .condition-live,
.rain-condition .condition-live {
  display: flex;
  flex-direction: column;
}

.wind-condition .condition-secondary,
.rain-condition .condition-secondary {
  margin-top: 0.65rem;
}

/* reserve two forecast rows below every secondary divider */
.condition-body-secondary {
  --condition-secondary-height: 4rem;
}

.condition-body-secondary .condition-live {
  display: contents;
}

.condition-body-secondary .condition-primary {
  grid-column: 1;
  grid-row: 1;
}

.condition-body-secondary .condition-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  grid-column: 1 / -1;
  grid-row: 2;
  height: var(--condition-secondary-height);
  padding-bottom: 0.4rem;
  column-gap: 0.6rem;
  row-gap: 0.3rem;
}

.condition-body-secondary .condition-secondary > span {
  grid-column: 1 / -1;
}

.condition-body-secondary .condition-secondary > strong {
  grid-column: 1;
}

.condition-body-secondary .condition-forecast {
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / 3;
}

/* start secondary forecasts beside their live readings */
.wind-condition .condition-forecast-readings,
.rain-condition .condition-forecast-readings,
.tide-condition .condition-forecast-readings {
  grid-template-rows: minmax(0, 1fr) var(--condition-secondary-height);
  align-content: stretch;
}

.wind-condition .condition-forecast-reading,
.rain-condition .condition-forecast-reading,
.tide-condition .condition-forecast-reading {
  align-self: start;
}

.wind-condition .condition-forecast-reading:last-child,
.rain-condition .condition-forecast-reading:last-child,
.tide-condition .condition-forecast-reading:last-child {
  grid-row: 2;
  padding-top: 1.9rem;
}

.temperature-condition {
  grid-column: span 6;
  min-height: 12rem;
}

.temperature-condition .condition-forecast,
.temperature-condition .condition-forecast-readings {
  height: 100%;
}

.temperature-condition .condition-forecast-readings {
  grid-template-rows: auto auto minmax(0.35rem, 1fr) auto auto;
}

.temperature-condition .condition-forecast-reading:nth-child(3) {
  grid-row: 4;
  padding-top: 0.6rem;
}

.temperature-condition .condition-forecast-reading:nth-child(4) {
  grid-row: 5;
}

.temperature-condition .condition-card-content,
.wind-condition .condition-card-content {
  padding: clamp(1rem, 2vw, 1.4rem);
}

.temperature-condition .condition-secondary {
  width: 100%;
}

.wind-condition {
  grid-column: span 6;
  min-height: 12rem;
}

.rain-condition {
  grid-column: span 6;
}

/* reserve the same primary row for rain and the two cloud extrema */
.rain-condition .condition-primary,
.clouds-condition .condition-primary {
  min-height: clamp(2.5rem, 4vw, 3.6rem);
}

/* use the body gap without stretching secondary labels or adding another margin */
.rain-condition .condition-secondary,
.clouds-condition .condition-secondary {
  margin-top: 0;
  align-content: start;
}

/* align the rain total with its content-sized accumulation label */
.rain-condition .condition-forecast-reading:last-child {
  padding-top: 1.45rem;
}

.compact-condition,
.air-quality-condition {
  grid-column: span 3;
}

/* pair rain with clouds and keep tide beside sunset on the final row */
.compact-condition.clouds-condition,
.compact-condition.tide-condition,
.compact-condition.sunset-condition {
  grid-column: span 6;
}

/* reserve enough room for rain units and daily cloud extrema */
.rain-condition .condition-body,
.clouds-condition .condition-body {
  grid-template-columns: minmax(0, 1fr) max-content;
}

/* preserve the full-width row and grow only when cloud ranges need another line */
.clouds-condition .condition-secondary {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: var(--condition-secondary-height);
}

/* compare different time windows without moving the primary percentages */
.clouds-condition .condition-secondary-paired {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

/* mirror tide's next-low label and subordinate reading */
.condition-secondary-comparison {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  gap: 0.05rem;
  opacity: 0.75;
  text-align: right;
}

.condition-secondary-comparison > span {
  font-size: 0.58rem;
  font-weight: 650;
}

.clouds-condition .condition-secondary-comparison > strong {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  text-align: right;
}

.clouds-condition .condition-secondary-paired strong {
  line-height: 1.1;
  white-space: normal;
}

/* keep both percentages above the secondary divider */
.clouds-condition .condition-forecast {
  grid-row: 1;
  align-self: start;
}

/* keep the unitless daily maximum and its time beside the current change */
.pressure-condition .condition-body {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.pressure-condition .condition-card-heading {
  position: relative;
  min-height: 1.31rem;
}

/* wrap long labels without pushing readings below neighboring cards */
.pressure-condition .condition-status {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 4rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.6rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.pressure-condition .condition-primary strong {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.pressure-condition .condition-forecast {
  align-self: start;
  margin-left: auto;
}

/* subordinate the expected time beneath the daily maximum */
.pressure-condition .condition-forecast-reading:last-child strong {
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  font-weight: 600;
}

/* keep sunset's daily change beside the primary clock reading */
.sunset-condition .condition-body {
  grid-template-columns: minmax(0, 1fr) max-content;
}

/* preserve the full-width golden-hour row */
.sunset-condition .condition-secondary {
  grid-template-columns: minmax(0, 1fr);
}

.sunset-condition .condition-forecast {
  grid-row: 1;
  align-self: center;
}

.sunset-condition .condition-forecast-reading {
  display: grid;
  gap: 0.1rem;
}

/* admin indoor house cross section */
.indoor-house-panel {
  margin-top: 1rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
  border-radius: var(--md-sys-shape-large);
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand-citron) 24%, transparent), transparent 42%),
    var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
}

.indoor-house-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: left;
}

.indoor-house-heading > .material-symbols-rounded {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  color: var(--brand-black);
  background: var(--brand-citron);
  font-size: 1.65rem;
}

.indoor-house-heading h2,
.indoor-house-heading p {
  margin: 0;
}

.indoor-house-illustration {
  --indoor-house-roof-height: 6.25rem;

  position: relative;
  width: min(100% - 4rem, 34rem);
  margin: 1.25rem auto 0;
  padding-top: var(--indoor-house-roof-height);
}

.indoor-house-roof {
  position: absolute;
  z-index: 0;
  top: 0;
  right: -2rem;
  left: -2rem;
  height: var(--indoor-house-roof-height);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--brand-black);
}

.indoor-house-roof span {
  position: absolute;
  inset: 0.28rem 0.6rem 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: color-mix(in srgb, var(--brand-citron) 28%, var(--md-sys-color-surface-container-lowest));
}

.indoor-house-levels {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0.2rem solid var(--brand-black);
  border-radius: 0 0 var(--md-sys-shape-small) var(--md-sys-shape-small);
  background: var(--md-sys-color-surface-container-lowest);
  list-style: none;
}

.indoor-house-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
  padding: 0.8rem clamp(1rem, 4vw, 2rem);
  border-top: 0.15rem solid var(--brand-black);
}

.indoor-house-level:first-child {
  border-top: 0;
}

.indoor-house-level-second {
  background: color-mix(in srgb, var(--brand-lavender) 12%, var(--md-sys-color-surface-container-lowest));
}

.indoor-house-level-first {
  background: color-mix(in srgb, var(--brand-citron) 16%, var(--md-sys-color-surface-container-lowest));
}

.indoor-house-level-basement {
  background: var(--md-sys-color-surface-container);
}

.indoor-house-level > span:first-child {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.indoor-house-temperature strong {
  display: block;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
}

.indoor-house-temperature small {
  margin-left: 0.2rem;
  font-size: 0.42em;
  letter-spacing: 0;
}

/* admin soil moisture map */
.admin-soil-map-panel {
  margin-top: 1rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
}

.admin-soil-map {
  margin-top: 1rem;
}

.soil-moisture-marker {
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.soil-moisture-marker-leader {
  stroke: rgba(0, 0, 0, 0.72);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.soil-moisture-marker-anchor {
  fill: var(--brand-black);
  stroke: var(--brand-citron);
  stroke-width: 1.5;
}

.soil-moisture-marker-head circle {
  fill: var(--brand-citron);
  stroke: var(--brand-black);
  stroke-width: 3;
}

.soil-moisture-marker-head text {
  fill: var(--brand-black);
  font-family: "Google Sans Flex", sans-serif;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-anchor: middle;
}

.alert-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1rem;
}

/* keep every alert label and reading light against its dark severity color */
.local-alert {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem;
  border-left: 0.35rem solid var(--brand-citron);
  border-radius: var(--md-sys-shape-medium);
  color: var(--brand-white);
  background: #4a3500;
}

.local-alert.danger {
  border-color: var(--brand-orange);
  background: #7f1d1d;
}

.local-alert span {
  color: inherit;
  font-size: 0.75rem;
  line-height: 1.45;
}

/* keep each forecast range label on one line */
.forecast-range-selector {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: var(--forecast-range-padding);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-full);
  background: var(--md-sys-color-surface-container-high);
}

.forecast-range-selector button {
  flex: 1 0 auto;
  min-width: 4rem;
  min-height: var(--forecast-range-button-height);
  padding: 0.45rem 0.85rem;
  border-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.forecast-range-selector button:hover:not(:disabled) {
  border-color: transparent;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-highest);
  box-shadow: none;
}

.forecast-range-selector button[aria-pressed="true"],
.forecast-range-selector button[aria-pressed="true"]:hover:not(:disabled) {
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-1);
}

.forecast-chart-shell {
  --forecast-crosshair-position: 50%;
  --forecast-current-time-position: 50%;
  position: relative;
  margin-top: 0.8rem;
}

.forecast-chart-grid {
  --forecast-sticky-label-top: calc(var(--weather-sticky-header-height, 0px) + 0.35rem);
  display: grid;
  gap: 0.45rem;
  position: relative;
  min-width: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.forecast-chart-grid:focus-visible {
  outline: none;
}

.forecast-current-time-line,
.forecast-shared-crosshair,
.forecast-current-time-label,
.forecast-crosshair-label {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  pointer-events: none;
}

.forecast-current-time-line {
  z-index: 7;
  left: var(--forecast-current-time-position);
  background: var(--brand-citron);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72);
  transform: translateX(-50%);
}

.forecast-current-time-label {
  z-index: 7;
  left: var(--forecast-current-time-position);
  transform: translateX(-50%);
}

.forecast-current-time-label span {
  display: block;
  position: sticky;
  top: var(--forecast-sticky-label-top);
  width: max-content;
  margin-left: 50%;
  padding: 0.18rem 0.32rem;
  border-radius: var(--md-sys-shape-full);
  color: var(--brand-black);
  background: var(--brand-citron);
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
  transform: translateX(-50%);
}

.forecast-shared-crosshair {
  z-index: 8;
  left: var(--forecast-crosshair-position);
  background: var(--brand-black);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: translateX(-50%);
}

.forecast-crosshair-label {
  z-index: 8;
  left: var(--forecast-crosshair-position);
  transform: translateX(-50%);
}

.forecast-crosshair-label time {
  display: block;
  position: sticky;
  top: var(--forecast-sticky-label-top);
  width: max-content;
  margin-left: 50%;
  padding: 0.28rem 0.5rem;
  border-radius: var(--md-sys-shape-full);
  color: var(--brand-white);
  background: var(--brand-black);
  box-shadow: var(--md-sys-elevation-1);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  transform: translateX(-50%);
  white-space: nowrap;
}

.forecast-crosshair-start .forecast-crosshair-label time {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform: translateX(0);
}

.forecast-crosshair-end .forecast-crosshair-label time {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transform: translateX(-100%);
}

.forecast-current-start .forecast-current-time-label span {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform: translateX(0);
}

.forecast-current-end .forecast-current-time-label span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transform: translateX(-100%);
}

.forecast-chart {
  --forecast-chart-accent: var(--brand-lavender);
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
}

.forecast-chart[data-forecast-chart="wind"] {
  --forecast-chart-accent: #248b54;
}

.forecast-chart[data-forecast-chart="rain-rate"] {
  --forecast-chart-accent: #3077ba;
}

.forecast-chart[data-forecast-chart="air-quality"] {
  --forecast-chart-accent: #8a6530;
}

.forecast-chart[data-forecast-chart="uv-index"] {
  --forecast-chart-accent: #a66800;
}

.forecast-chart[data-forecast-chart="pressure"] {
  --forecast-chart-accent: #6658a5;
}

.forecast-chart[data-forecast-chart="humidity"] {
  --forecast-chart-accent: #00849a;
}

.forecast-chart[data-forecast-chart="tide"] {
  --forecast-chart-accent: #006d94;
}

.forecast-chart-heading {
  display: flex;
  position: absolute;
  z-index: 2;
  left: 0;
  align-items: center;
  padding: 0.55rem 0.75rem;
  pointer-events: none;
}

.forecast-chart-heading-top {
  top: 0;
}

.forecast-chart-heading h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.forecast-chart-heading .material-symbols-rounded {
  color: currentColor;
  font-size: 1.1rem;
}

/* mark adjusted-mode icons with the switch's gold */
.condition-label .forecast-adjusted-icon,
.forecast-chart-heading .forecast-adjusted-icon {
  color: var(--forecast-adjusted-color);
}

.forecast-chart-plot {
  position: relative;
  height: clamp(7rem, 13vw, 9rem);
}

.forecast-chart-daylight {
  display: flex;
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.forecast-chart-daylight span {
  flex: 1 1 0;
  min-width: 0;
}

.forecast-chart-daylight [data-forecast-light="day"] {
  background: var(--forecast-day-shade);
}

.forecast-chart-daylight [data-forecast-light="night"] {
  background: var(--forecast-night-shade);
}

.forecast-chart-days {
  display: flex;
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.forecast-chart-days > span {
  flex: 1 1 0;
  position: relative;
  min-width: 0;
}

.forecast-chart-day-start {
  border-left: 1px solid rgba(84, 84, 80, 0.55);
}

.forecast-chart-day-start b {
  position: absolute;
  top: 2rem;
  left: 0.16rem;
  padding: 0.14rem 0.24rem;
  border-radius: 0.25rem;
  color: var(--brand-black);
  background: #e4e4e4;
  font-size: 0.5rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.forecast-chart-scale {
  position: absolute;
  z-index: 2;
  right: 0.45rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.forecast-chart-scale-maximum {
  top: 0.45rem;
}

.forecast-chart-scale-minimum {
  bottom: 0.45rem;
}

.forecast-chart-plot svg {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.forecast-chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.forecast-chart-line-1 {
  stroke-dasharray: 7 6;
  stroke-width: 1.5;
}

.forecast-chart-value {
  display: grid;
  gap: 0.12rem;
  position: absolute;
  z-index: 9;
  left: var(--forecast-crosshair-position);
  min-width: max-content;
  padding: 0.34rem 0.48rem;
  border-radius: var(--md-sys-shape-small);
  color: var(--brand-white);
  background: var(--brand-black);
  box-shadow: var(--md-sys-elevation-1);
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
}

.forecast-chart-value-top {
  top: 0.35rem;
}

.forecast-chart-value-bottom {
  bottom: 0.35rem;
}

.forecast-crosshair-start .forecast-chart-value {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform: translateX(0);
}

.forecast-crosshair-end .forecast-chart-value {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transform: translateX(-100%);
}

.forecast-chart-value span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
}

.forecast-chart-value small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.54rem;
  font-weight: 650;
  text-transform: uppercase;
}

.forecast-chart-value strong {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.forecast-x-axis {
  display: flex;
  position: sticky;
  z-index: 6;
  bottom: 0;
  margin-top: 0.4rem;
  min-width: 0;
  height: 1.55rem;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface);
  box-shadow: 0 -1px 0 var(--md-sys-color-outline-variant);
  font-size: 0.62rem;
  font-weight: 700;
}

.forecast-x-tick {
  flex: 1 1 0;
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--md-sys-color-outline-variant);
}

.forecast-x-tick[data-forecast-light="day"] {
  background: var(--forecast-day-shade);
}

.forecast-x-tick[data-forecast-light="night"] {
  background: var(--forecast-night-shade);
}

.forecast-x-tick time {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.forecast-x-tick:first-child time {
  left: 0;
  transform: none;
}

.forecast-x-tick:last-child time {
  right: 0;
  left: auto;
  transform: none;
}

.forecast-weather-map {
  margin-top: 0.45rem;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
}

.forecast-map-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 640 / 420;
  background: #d9d8d1;
}

.forecast-map-svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.forecast-map-weather-layer {
  opacity: 0.88;
}

.forecast-map-place-layer {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9));
  pointer-events: none;
}

.forecast-map-place-layer text {
  fill: var(--brand-black);
  font: 750 13px "Google Sans Flex", sans-serif;
  paint-order: stroke;
  stroke: var(--brand-white);
  stroke-width: 4px;
}

.forecast-map-layer-controls {
  display: flex;
  position: absolute;
  z-index: 10;
  top: 0.65rem;
  left: 0.65rem;
  gap: 0.3rem;
  padding: 0.25rem;
  border-radius: var(--md-sys-shape-full);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--md-sys-elevation-2);
  backdrop-filter: blur(0.4rem);
}

.forecast-map-layer-controls button {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 2.4rem;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  border: 0;
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  font-size: 0.68rem;
}

.forecast-map-layer-controls button:hover:not(:disabled) {
  border: 0;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
}

.forecast-map-layer-controls button[aria-pressed="true"] {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
}

.forecast-map-layer-controls .material-symbols-rounded {
  font-size: 1.1rem;
}

.forecast-map-selection-phase {
  position: absolute;
  z-index: 9;
  top: 3.65rem;
  left: var(--forecast-crosshair-position);
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

.forecast-map-selection-phase span {
  display: block;
  width: max-content;
  margin-left: 50%;
  padding: 0.24rem 0.42rem;
  transform: translateX(-50%);
  border-radius: var(--md-sys-shape-full);
  color: var(--brand-white);
  background: var(--brand-black);
  box-shadow: var(--md-sys-elevation-1);
  font-size: 0.6rem;
  font-weight: 750;
  line-height: 1;
}

.forecast-crosshair-start .forecast-map-selection-phase span {
  transform: translateX(0);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.forecast-crosshair-end .forecast-map-selection-phase span {
  transform: translateX(-100%);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.forecast-map-legend {
  display: grid;
  position: absolute;
  z-index: 10;
  bottom: 0.65rem;
  left: 0.65rem;
  width: min(16rem, calc(100% - 1.3rem));
  gap: 0.18rem;
  padding: 0.42rem 0.55rem 0.35rem;
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-on-surface);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--md-sys-elevation-2);
  backdrop-filter: blur(0.4rem);
  pointer-events: none;
}

.forecast-map-legend p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.62rem;
  line-height: 1;
}

.forecast-map-legend p strong {
  font-weight: 750;
}

.forecast-map-legend p span {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.55rem;
  font-weight: 700;
}

.forecast-map-legend-bar {
  display: block;
  height: 0.55rem;
  border: 1px solid rgba(33, 26, 31, 0.22);
  border-radius: 0.2rem;
  background: linear-gradient(90deg, #9eff94, #2f8f23 25%, #ffe300 45%, #da0000 65%, #fe55fe 82%, #fefefe);
}

.forecast-map-legend[data-forecast-map-legend-layer="clouds"] .forecast-map-legend-bar {
  background: linear-gradient(90deg, rgba(130, 157, 181, 0.12), rgba(190, 204, 216, 0.72), #ffffff);
}

.forecast-map-legend[data-forecast-map-legend-layer="precipitation"][data-forecast-map-legend-phase="history"] .forecast-map-legend-bar {
  background: linear-gradient(90deg, #c2d5bb, #59ad45 16%, #fffc09 35%, #ff7b00 48%, #ed0000 62%, #ff69c6 78%, #8000cb 91%, #e1d1ec);
}

.forecast-map-legend[data-forecast-map-legend-layer="precipitation"][data-forecast-map-legend-phase="forecast"] .forecast-map-legend-bar {
  background: linear-gradient(90deg, #cecece, #bbffab 8%, #259901 18%, #ffff0f 28%, #fd6a00 38%, #df0000 48%, #e800e0 60%, #a000ff 70%, #00c7ff 82%, #0031ff);
}

.forecast-map-legend[data-forecast-map-legend-layer="wind"] .forecast-map-legend-bar {
  background: linear-gradient(90deg, #0050ff, #1bd3ff 20%, #72ff09 32%, #fee20a 42%, #fd5d08 58%, #fb2b36 72%, #f48688);
}

.forecast-map-legend-labels {
  display: flex;
  justify-content: space-between;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.5rem;
  font-weight: 650;
  line-height: 1;
}

.forecast-map-cache-progress {
  display: grid;
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  width: min(17rem, calc(100% - 1.3rem));
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  transform: translate(-50%, -50%);
  border-radius: var(--md-sys-shape-medium);
  color: var(--md-sys-color-on-inverse-surface, #f5eff4);
  background: rgba(31, 29, 30, 0.9);
  box-shadow: var(--md-sys-elevation-3);
  backdrop-filter: blur(0.45rem);
  pointer-events: none;
}

.forecast-map-cache-progress[hidden] {
  display: none;
}

.forecast-map-cache-progress p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1;
}

.forecast-map-cache-progress p strong {
  font-weight: 700;
}

.forecast-map-cache-progress p span {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.forecast-map-cache-progress progress {
  width: 100%;
  height: 0.38rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--md-sys-shape-full);
  appearance: none;
  background: rgba(255, 255, 255, 0.22);
}

.forecast-map-cache-progress progress::-webkit-progress-bar {
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.22);
}

.forecast-map-cache-progress progress::-webkit-progress-value {
  border-radius: inherit;
  background: var(--md-sys-color-inverse-primary, #ffb2c8);
  transition: width 120ms linear;
}

.forecast-map-cache-progress progress::-moz-progress-bar {
  border-radius: inherit;
  background: var(--md-sys-color-inverse-primary, #ffb2c8);
}

.forecast-map-cache-progress small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.forecast-map-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  pointer-events: none;
}

.forecast-map-error {
  position: absolute;
  z-index: 11;
  right: 0.65rem;
  bottom: 0.65rem;
  margin: 0;
  padding: 0.42rem 0.65rem;
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-error-container, #410002);
  background: var(--md-sys-color-error-container);
  box-shadow: var(--md-sys-elevation-1);
  font-size: 0.65rem;
  font-weight: 700;
}

.trend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.trend-chart {
  height: max(30rem, calc(100svh - 10rem));
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.trend-chart-legend,
.trend-chart-legend span,
.trend-chart-legend button {
  display: flex;
  align-items: center;
}

.trend-chart-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.trend-chart-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-color: var(--md-sys-color-outline-variant) transparent;
  scrollbar-width: thin;
}

.trend-chart-landscape {
  --trend-crosshair-position: 50%;
  --trend-today-position: 50%;
  position: relative;
  width: 100%;
  min-width: 100%;
  height: 100%;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.trend-chart[data-trend-detail="daily"] .trend-chart-landscape {
  width: max(100%, 3000px);
}

.trend-chart-fixed-chrome {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.trend-chart-fixed-chrome .trend-metric-control,
.trend-chart-fixed-chrome .trend-mode-toggle,
.trend-chart-fixed-chrome .trend-detail-toggle,
.trend-chart-fixed-chrome .trend-extreme-controls,
.trend-chart-fixed-chrome .trend-chart-legend {
  pointer-events: auto;
}

.trend-chart-landscape > svg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trend-chart-axis {
  stroke: rgba(84, 84, 80, 0.45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.trend-month-line {
  stroke: rgba(84, 84, 80, 0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.trend-y-grid-line {
  stroke: rgba(84, 84, 80, 0.13);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.trend-month-label {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.68rem;
  font-weight: 650;
  text-align: center;
}

.trend-historical-quartile-band {
  fill: rgba(84, 84, 80, 0.26);
  stroke: none;
  opacity: 1;
}

.trend-historical-range-line,
.trend-aggregate-median-line {
  fill: none;
  stroke: rgba(35, 32, 35, 0.72);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.trend-historical-range-line {
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.trend-aggregate-median-line {
  stroke-width: 2;
}

.trend-year-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  pointer-events: stroke;
  transition: opacity 160ms ease, stroke-width 160ms ease;
}

.trend-year-line-current {
  stroke-width: 2;
}

.trend-year-line-selected {
  stroke-width: 2.5;
}

.trend-year-hit-target {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 12;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  pointer-events: stroke;
}

.trend-chart[data-selected-trend-year] .trend-year-line:not(.trend-year-line-selected):not(.trend-year-line-current),
.trend-chart[data-selected-trend-year] .trend-year-hit-target:not(.trend-year-hit-target-selected):not(.trend-year-hit-target-current) {
  opacity: 0;
  pointer-events: none;
}

.trend-crosshair-line,
.trend-crosshair-slider {
  position: absolute;
  left: var(--trend-crosshair-position);
  transform: translateX(-50%);
}

.trend-crosshair-line {
  z-index: 3;
  top: 15%;
  bottom: 12%;
  width: 2px;
  background: var(--brand-black);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.trend-crosshair-slider {
  z-index: 5;
  top: 15%;
  bottom: 12%;
  width: 1rem;
  cursor: ew-resize;
  pointer-events: auto;
}

.trend-crosshair-slider:focus {
  outline: none;
}

.trend-crosshair-summary {
  position: absolute;
  z-index: 4;
  top: 15%;
  left: var(--trend-crosshair-position);
  display: grid;
  justify-items: start;
  width: max-content;
  max-width: min(25rem, 86%);
  margin-left: 0;
  gap: 0;
  pointer-events: none;
}

.trend-crosshair-date-pill {
  position: absolute;
  z-index: 4;
  top: 15%;
  left: var(--trend-crosshair-position);
  padding: 0.16rem 0.3rem;
  border-radius: var(--md-sys-shape-full);
  color: var(--brand-white);
  background: var(--brand-black);
  box-shadow: var(--md-sys-elevation-1);
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 0.3rem));
  pointer-events: none;
}

.trend-crosshair-values {
  display: grid;
  grid-template-columns: max-content;
  gap: 0.18rem;
  padding: 0.28rem 0.35rem;
  border-radius: 0 var(--md-sys-shape-small) var(--md-sys-shape-small) 0;
  color: var(--brand-white);
  background: var(--brand-black);
  box-shadow: var(--md-sys-elevation-1);
  font-size: 0.58rem;
  line-height: 1;
}

.trend-crosshair-value {
  display: grid;
  grid-template-columns: 0.65rem max-content auto;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

.trend-crosshair-value i {
  width: 0.65rem;
  height: 0.16rem;
  border-radius: var(--md-sys-shape-full);
  background: currentColor;
}

.trend-crosshair-value strong {
  font-weight: 750;
}

.trend-crosshair-value output {
  color: rgba(255, 255, 255, 0.76);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.trend-crosshair-summary-left {
  justify-items: end;
  margin-left: 0;
  transform: translateX(-100%);
}

.trend-crosshair-summary-left .trend-crosshair-values {
  border-radius: var(--md-sys-shape-small) 0 0 var(--md-sys-shape-small);
}

.trend-today-marker {
  position: absolute;
  z-index: 2;
  top: 15%;
  bottom: 12%;
  left: var(--trend-today-position);
  width: 0;
  border-left: 2px dashed var(--brand-orange);
  pointer-events: none;
}

.trend-today-marker span {
  position: absolute;
  top: -1.15rem;
  left: 0;
  padding: 0.16rem 0.3rem;
  border-radius: var(--md-sys-shape-full);
  color: var(--brand-black);
  background: var(--brand-orange);
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
  transform: translateX(-50%);
}

.trend-metric-control,
.trend-mode-toggle,
.trend-detail-toggle,
.trend-chart-range,
.trend-y-axis,
.trend-month-axis {
  position: absolute;
  z-index: 2;
}

.trend-metric-control {
  z-index: 7;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
}

.trend-metric-trigger,
.trend-metric-control-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.trend-metric-trigger {
  min-height: 0;
  padding: 0.2rem 0.3rem;
  border: 0;
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-on-surface);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.trend-metric-trigger:hover:not(:disabled),
.trend-metric-trigger:focus-visible {
  border-color: transparent;
  color: var(--md-sys-color-primary);
  background: transparent;
  box-shadow: none;
}

.trend-chart-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.15;
}

.trend-metric-caret {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 0.12rem solid currentColor;
  border-bottom: 0.12rem solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 160ms ease;
}

.trend-metric-trigger[aria-expanded="true"] .trend-metric-caret {
  transform: rotate(225deg);
}

.trend-metric-flyover {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 50%;
  display: grid;
  grid-template-columns: repeat(2, minmax(9.5rem, 1fr));
  width: max-content;
  min-width: 19rem;
  gap: 0.1rem;
  padding: 0.35rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-medium);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-2);
  transform: translateX(-50%);
}

.trend-metric-option-group {
  display: grid;
  align-content: start;
  gap: 0.1rem;
}

.trend-metric-option-group > span {
  padding: 0.2rem 0.55rem 0.12rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trend-metric-option {
  justify-content: flex-start;
  min-width: 0;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-on-surface);
  background: transparent;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 650;
}

.trend-metric-option:hover:not(:disabled),
.trend-metric-option:focus-visible,
.trend-metric-option[aria-checked="true"] {
  border-color: transparent;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  box-shadow: none;
}

.trend-metric-option[aria-checked="true"] {
  font-weight: 800;
}

.trend-chart-range {
  top: 3.25rem;
  right: 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.68rem;
  font-weight: 700;
}

.trend-extreme-controls {
  position: absolute;
  z-index: 2;
  top: 3rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-surface-variant);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 92%, transparent);
  box-shadow: var(--md-sys-elevation-1);
  font-size: 0.62rem;
  font-weight: 750;
  transform: translateX(-50%);
}

.trend-insight-note {
  position: absolute;
  z-index: 2;
  top: 3.2rem;
  left: 50%;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.62rem;
  font-weight: 650;
  transform: translateX(-50%);
  white-space: nowrap;
}

.trend-extreme-controls select,
.trend-extreme-controls input {
  min-width: 0;
  min-height: 1.55rem;
  padding: 0.12rem 0.28rem;
  border: 0;
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-on-surface);
  background: transparent;
  box-shadow: none;
  font: inherit;
}

.trend-extreme-controls select {
  width: 5.8rem;
}

.trend-extreme-controls input {
  width: 3.6rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.trend-extreme-controls select:focus-visible,
.trend-extreme-controls input:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 1px;
}

.trend-extreme-comparator {
  font-size: 0.72rem;
}

.trend-wind-rose-landscape {
  cursor: default;
  touch-action: pan-x pan-y;
}

.trend-wind-rose-landscape > .trend-wind-rose {
  inset: 2.8rem 0 2rem;
  width: 100%;
  height: calc(100% - 4.8rem);
}

.trend-wind-rose-caption {
  position: absolute;
  z-index: 2;
  top: 2.45rem;
  left: 50%;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.62rem;
  font-weight: 650;
  transform: translateX(-50%);
  white-space: nowrap;
}

.trend-wind-rose-grid,
.trend-wind-rose-axis {
  fill: none;
  stroke: rgba(84, 84, 80, 0.2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.trend-wind-rose-sector {
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
}

.trend-wind-rose-sector-historical {
  fill: rgba(84, 84, 80, 0.35);
  stroke: rgba(84, 84, 80, 0.6);
}

.trend-wind-rose-sector-current {
  fill: color-mix(in srgb, var(--brand-orange) 68%, transparent);
  stroke: var(--brand-orange);
}

.trend-wind-rose-label {
  fill: var(--md-sys-color-on-surface-variant);
  font-size: 9px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
}

.trend-wind-rose-legend {
  bottom: 0.65rem;
}

.trend-wind-rose-legend .trend-wind-rose-historical i {
  height: 0.48rem;
  border-radius: 0.12rem;
  color: rgba(84, 84, 80, 0.5);
}

.trend-wind-rose-legend .trend-wind-rose-current i {
  height: 0.48rem;
  border-radius: 0.12rem;
  color: var(--brand-orange);
}

.trend-mode-toggle,
.trend-detail-toggle {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
  font-size: 0.68rem;
  font-weight: 750;
}

.trend-toggle-icon {
  width: 1rem;
  height: 0.9rem;
  flex: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.trend-toggle-icon-fill {
  fill: currentColor;
  stroke: none;
  opacity: 0.16;
}

.trend-toggle-icon-muted {
  opacity: 0.3;
}

.trend-mode-toggle {
  top: 0.65rem;
  right: 0.75rem;
  padding: 0.42rem 0.7rem;
  border-radius: var(--md-sys-shape-full);
}

.trend-detail-toggle {
  top: 0.65rem;
  left: 0.75rem;
  padding: 0.42rem 0.7rem;
  border-radius: var(--md-sys-shape-full);
}

.trend-mode-toggle:hover,
.trend-mode-toggle:focus-visible,
.trend-detail-toggle:hover,
.trend-detail-toggle:focus-visible {
  background: var(--md-sys-color-surface-container-high);
}

.trend-month-axis {
  right: 2.5%;
  bottom: 0.3rem;
  left: 5.8%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  pointer-events: none;
}

.trend-y-axis {
  top: 15%;
  bottom: 12%;
  left: 0.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.trend-y-axis span {
  padding: 0.08rem 0.18rem;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 82%, transparent);
  white-space: nowrap;
  transform: translateY(-50%);
}

.trend-y-axis span:last-child {
  transform: translateY(50%);
}

.trend-chart-legend {
  position: absolute;
  z-index: 1;
  bottom: calc(12% + 0.55rem);
  left: 50%;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(32rem, 88%);
  gap: 0.3rem 0.55rem;
  padding: 0.35rem 0.45rem;
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-on-surface-variant);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 88%, transparent);
  box-shadow: var(--md-sys-elevation-1);
  font-size: 0.62rem;
  font-weight: 650;
  pointer-events: auto;
  transform: translateX(-50%);
}

.trend-chart-legend.trend-chart-legend-top {
  top: calc(15% + 0.55rem);
  bottom: auto;
}

.trend-chart-legend span,
.trend-chart-legend button {
  gap: 0.22rem;
}

.trend-chart-legend button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
}

.trend-chart-legend button:hover,
.trend-chart-legend button:focus-visible {
  color: var(--md-sys-color-on-surface);
}

.trend-year-legend-selected {
  color: var(--md-sys-color-on-surface);
  font-weight: 850;
}

.trend-chart[data-selected-trend-year] .trend-year-legend:not(.trend-year-legend-selected):not(.trend-legend-current) {
  opacity: 0.35;
}

.trend-chart-legend i {
  display: block;
  width: 1rem;
  height: 0.16rem;
  border-radius: var(--md-sys-shape-full);
  background: currentColor;
}

.trend-chart-legend .trend-legend-quartiles i {
  height: 0.48rem;
  border-radius: 0.12rem;
  color: rgba(84, 84, 80, 0.5);
}

.trend-chart-legend .trend-legend-range i {
  height: 0;
  border-top: 1px dashed rgba(35, 32, 35, 0.72);
  border-radius: 0;
  background: transparent;
}

.trend-chart-legend .trend-legend-median i,
.trend-aggregate-color {
  color: rgba(35, 32, 35, 0.86);
}

.trend-legend-current {
  color: var(--md-sys-color-on-surface);
  font-weight: 800;
}

.trend-legend-current i {
  height: 0.24rem;
}

.trend-year-color-0 {
  color: #3878c5;
}

.trend-year-color-1 {
  color: #439756;
}

.trend-year-color-2 {
  color: #e6b519;
}

.trend-year-color-3 {
  color: #ef7e1f;
}

.trend-year-color-4 {
  color: #cf4337;
}

.trend-year-color-5 {
  color: #8d6e63;
}

.trend-year-color-6 {
  color: #545450;
}

.trend-year-color-7 {
  color: #00838f;
}

.trend-current-year-color {
  color: var(--brand-orange);
}

.empty-panel {
  margin: 1.5rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
}

/* skeleton loaders */
.skeleton-region {
  cursor: progress;
}

.skeleton-line,
.skeleton-map-shape {
  background: linear-gradient(100deg, var(--md-sys-color-surface-container-highest) 25%, var(--md-sys-color-surface-container-high) 45%, var(--md-sys-color-surface-container-highest) 65%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* shine across every reserved skeleton surface */
.skeleton-card,
.skeleton-forecast-chart,
.skeleton-forecast-map,
.skeleton-trend-chart,
.skeleton-map,
.skeleton-station-list .nearby-station-select,
.skeleton-history-row td,
.skeleton-history-card {
  position: relative;
  overflow: hidden;
}

.skeleton-card::after,
.skeleton-forecast-chart::after,
.skeleton-forecast-map::after,
.skeleton-trend-chart::after,
.skeleton-map::after,
.skeleton-station-list .nearby-station-select::after,
.skeleton-history-row td::after,
.skeleton-history-card::after {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.52) 45%, transparent 65%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}

.skeleton-line {
  display: block;
  height: 0.7rem;
  border-radius: 999px;
}

.skeleton-card {
  background: var(--surface-muted);
  box-shadow: none;
}

.skeleton-card .condition-label,
.skeleton-card .condition-status,
.skeleton-card .condition-primary strong,
.skeleton-card .condition-secondary > span,
.skeleton-card .condition-secondary strong,
.skeleton-card .condition-detail,
.skeleton-card .condition-forecast-label,
.skeleton-card .condition-forecast strong {
  color: transparent;
  background: linear-gradient(100deg, var(--md-sys-color-surface-container-highest) 25%, var(--md-sys-color-surface-container-high) 45%, var(--md-sys-color-surface-container-highest) 65%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-color: transparent;
  border-radius: 999px;
}

.skeleton-card .condition-primary strong,
.skeleton-card .condition-secondary strong {
  width: max-content;
}

.skeleton-card .condition-detail {
  width: 68%;
}

.skeleton-card[data-condition="tide"] .condition-detail {
  width: 100%;
}

.skeleton-forecast-chart {
  background: var(--md-sys-color-surface-container-highest);
}

.skeleton-forecast-chart .forecast-chart-heading h3 {
  color: var(--md-sys-color-on-surface);
}

.skeleton-chart-fill {
  fill: var(--md-sys-color-surface-container-highest);
}

.skeleton-forecast-map .forecast-map-canvas {
  display: grid;
  place-items: center;
}

.skeleton-trend-chart .trend-chart-range,
.skeleton-trend-chart .trend-chart-title,
.skeleton-trend-chart .trend-chart-legend span {
  color: transparent;
  background: linear-gradient(100deg, var(--md-sys-color-surface-container-highest) 25%, var(--md-sys-color-surface-container-high) 45%, var(--md-sys-color-surface-container-highest) 65%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 999px;
}

.skeleton-trend-chart .trend-chart-title {
  min-width: 8rem;
  min-height: 2.15rem;
}

.trend-metric-control-skeleton .trend-metric-caret {
  visibility: hidden;
}

.skeleton-map .station-map-canvas,
.skeleton-map .property-map-canvas,
.property-admin-map.skeleton-map {
  display: grid;
  place-items: center;
}

.skeleton-map-shape {
  display: block;
  width: 84%;
  height: 78%;
  border-radius: 0.6rem;
}

.skeleton-attribution {
  display: inline-block;
  width: 55%;
  margin-left: auto;
  color: transparent;
  background: linear-gradient(100deg, var(--md-sys-color-surface-container-highest) 25%, var(--md-sys-color-surface-container-high) 45%, var(--md-sys-color-surface-container-highest) 65%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 999px;
}

.skeleton-station-name {
  width: 78%;
  color: transparent;
  background: linear-gradient(100deg, var(--md-sys-color-surface-container-highest) 25%, var(--md-sys-color-surface-container-high) 45%, var(--md-sys-color-surface-container-highest) 65%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 999px;
}

.skeleton-station-reading {
  width: 48%;
  color: transparent;
  background: linear-gradient(100deg, var(--md-sys-color-surface-container-highest) 25%, var(--md-sys-color-surface-container-high) 45%, var(--md-sys-color-surface-container-highest) 65%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 999px;
}

/* reserve pending sensor fields and action feedback in place */
.skeleton-fields {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1rem 0;
}

.skeleton-field {
  height: 2.75rem;
  border-radius: var(--md-sys-shape-small);
}

.skeleton-action {
  width: 8rem;
}

.skeleton-temperature {
  width: 4rem;
  height: 2rem;
}

.skeleton-history-row td {
  height: calc(3.25rem + 2.3125px);
}

.skeleton-history-row:last-child td {
  height: calc(3.25rem + 0.5425px);
}

.skeleton-table-value {
  width: min(7rem, 80%);
}

.skeleton-history-time {
  width: 8rem;
}

.skeleton-history-temperature {
  width: 3.5rem;
  height: 1.6865rem;
}

.history-card.skeleton-history-card {
  padding-bottom: 0.55rem;
}

.skeleton-history-metric {
  width: 5rem;
  height: 0.838rem;
}

.skeleton-history-source {
  width: 4rem;
  height: 2.75rem;
  margin-top: 0.25rem;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.station-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.75fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.property-map-panel {
  margin-bottom: 1.4rem;
}

.property-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.75fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.property-map-count {
  padding: 0.35rem 0.65rem;
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
  font-size: 0.7rem;
  font-weight: 700;
}

.property-map {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-1);
}

.property-map-canvas,
.property-admin-map {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 640 / 400;
  background: #d9d8d1;
}

.property-map-svg,
.property-admin-map svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

.property-map-svg {
  cursor: grab;
  touch-action: none;
}

.property-admin-map svg {
  cursor: crosshair;
  touch-action: none;
}

.property-map-svg.property-map-dragging,
.property-admin-map svg.property-map-dragging {
  cursor: grabbing;
}

.property-map-overlay {
  pointer-events: none;
}

.property-map-zoom-controls {
  position: absolute;
  z-index: 3;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-medium);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-2);
}

.property-map-zoom-controls button {
  display: grid;
  place-items: center;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  font-size: 1rem;
  font-weight: 700;
}

.property-map-zoom-controls button + button {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.property-map-zoom-controls button:hover:not(:disabled) {
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
}

.property-map-zoom-controls button:disabled {
  opacity: 0.38;
}

.property-sensor-marker {
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

.property-sensor-marker-head {
  cursor: pointer;
  pointer-events: all;
}

.property-sensor-marker-leader {
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.property-sensor-marker-anchor {
  fill: var(--brand-black);
  stroke: var(--brand-citron);
  stroke-width: 1.5;
}

.property-sensor-marker-hit {
  fill: transparent;
  stroke: none;
}

.property-sensor-marker-dot {
  fill: var(--brand-citron);
  stroke: var(--brand-black);
  stroke-width: 3;
}

.property-sensor-marker:hover .property-sensor-marker-dot,
.property-sensor-marker:focus .property-sensor-marker-dot,
.property-sensor-marker.related-hover .property-sensor-marker-dot,
.property-sensor-marker.selected .property-sensor-marker-dot {
  fill: var(--brand-black);
  stroke: var(--brand-citron);
  stroke-width: 5;
}

.property-sensor-marker text {
  fill: var(--brand-black);
  font-family: "Google Sans Flex", sans-serif;
}

.property-sensor-marker-icon {
  fill: var(--brand-black);
  font-family: "Material Symbols Rounded" !important;
  font-size: 17px;
  font-feature-settings: "liga";
  text-anchor: middle;
}

.property-sensor-marker:hover .property-sensor-marker-icon,
.property-sensor-marker:focus .property-sensor-marker-icon,
.property-sensor-marker.related-hover .property-sensor-marker-icon,
.property-sensor-marker.selected .property-sensor-marker-icon {
  fill: var(--brand-citron);
}

.property-sensor-list-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.property-sensor-list {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
  scrollbar-gutter: stable;
  list-style: none;
}

.property-sensor-item {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.property-sensor-item:last-child {
  border-bottom: 0;
}

.property-sensor-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.7rem;
  border: 0;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  text-align: left;
}

.property-sensor-select:hover,
.property-sensor-select:focus-visible,
.property-sensor-item.selected > .property-sensor-select {
  background: var(--md-sys-color-primary-container);
}

.property-sensor-label,
.property-sensor-label strong,
.property-sensor-label span {
  display: block;
  min-width: 0;
}

.property-sensor-label strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-sensor-label span,
.property-map-note {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.66rem;
}

.property-sensor-label span {
  margin-top: 0.15rem;
}

.property-sensor-list-icon,
.property-admin-sensor-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
}

.property-sensor-readings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  font-size: 0.66rem;
  line-height: 1.35;
}

.property-sensor-details {
  margin: 0 0.7rem 0.7rem 3.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.property-sensor-meta {
  margin: 0.35rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.58rem;
  line-height: 1.35;
}

.property-map-note {
  margin: 0.55rem 0 0;
}

.property-admin {
  width: min(70rem, 100%);
}

.forecast-adjustment-admin {
  width: min(70rem, 100%);
  margin-bottom: 1rem;
}

.adjustment-scorecard {
  width: min(70rem, 100%);
  margin-bottom: 1rem;
}

.adjustment-scorecard-guardrail {
  margin: 0.65rem 0 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-outline-variant));
  border-radius: var(--md-sys-shape-medium);
  color: var(--md-sys-color-on-surface);
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 42%, transparent);
  font-size: 0.76rem;
  line-height: 1.45;
}

.adjustment-scorecard-publication,
.adjustment-scorecard-identities,
.adjustment-scorecard-support,
.adjustment-scorecard-diagnostic dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.55rem;
  margin: 0.8rem 0 0;
}

.adjustment-scorecard-publication > div,
.adjustment-scorecard-identities > div,
.adjustment-scorecard-support > div,
.adjustment-scorecard-diagnostic dl > div {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: var(--md-sys-shape-medium);
  background: var(--md-sys-color-surface-container-lowest);
}

.adjustment-scorecard-publication dt,
.adjustment-scorecard-identities dt,
.adjustment-scorecard-support dt,
.adjustment-scorecard-diagnostic dt {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.adjustment-scorecard-publication dd,
.adjustment-scorecard-identities dd,
.adjustment-scorecard-support dd,
.adjustment-scorecard-diagnostic dd {
  min-width: 0;
  margin: 0.22rem 0 0;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.adjustment-scorecard code {
  font-size: 0.65rem;
}

.adjustment-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.adjustment-scorecard-card {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-low);
}

.adjustment-scorecard-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.adjustment-scorecard-card-heading h3,
.adjustment-scorecard-diagnostic h4,
.adjustment-scorecard-rain h4,
.adjustment-scorecard-reliability h5 {
  margin: 0;
}

.adjustment-scorecard-comparison,
.adjustment-scorecard-statuses span {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.18rem 0.5rem;
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-highest);
  font-size: 0.59rem;
  font-weight: 700;
  line-height: 1.15;
}

.adjustment-scorecard-comparison[data-status="better"],
.adjustment-scorecard-statuses span[data-status="sufficient"],
.adjustment-scorecard-statuses span[data-status="supported"],
.adjustment-scorecard-statuses span[data-status="authorized_active"] {
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
}

.adjustment-scorecard-comparison[data-status="worse"],
.adjustment-scorecard-statuses span[data-status="invalid"],
.adjustment-scorecard-statuses span[data-status="rejected"],
.adjustment-scorecard-statuses span[data-status="fail_raw"] {
  color: var(--md-sys-color-error);
  background: var(--md-sys-color-error-container);
}

.adjustment-scorecard-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.adjustment-scorecard-table-scroll {
  max-width: 100%;
  margin-top: 0.75rem;
  overflow-x: auto;
}

.adjustment-scorecard-metrics {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.64rem;
  white-space: nowrap;
}

.adjustment-scorecard-metrics th,
.adjustment-scorecard-metrics td {
  padding: 0.38rem 0.45rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  text-align: right;
}

.adjustment-scorecard-metrics th:first-child,
.adjustment-scorecard-metrics td:first-child {
  text-align: left;
}

.adjustment-scorecard-metrics thead th {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.57rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.adjustment-scorecard-skill,
.adjustment-scorecard-reasons,
.adjustment-scorecard-note,
.adjustment-scorecard-diagnostic p {
  margin: 0.6rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.66rem;
  line-height: 1.45;
}

.adjustment-scorecard-skill span {
  margin-left: 0.35rem;
}

.adjustment-scorecard-details {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.adjustment-scorecard-details > summary {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.67rem;
  font-weight: 700;
  cursor: pointer;
}

.adjustment-scorecard-rain h4 {
  margin-top: 0.8rem;
  font-size: 0.72rem;
}

.adjustment-scorecard-reliability {
  margin-top: 0.7rem;
}

.adjustment-scorecard-reliability h5 {
  font-size: 0.67rem;
}

.adjustment-scorecard-reliability ol {
  display: grid;
  gap: 0.25rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.adjustment-scorecard-reliability li {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: var(--md-sys-shape-small);
  background: var(--md-sys-color-surface-container-lowest);
  font-size: 0.59rem;
}

.adjustment-scorecard-unavailable {
  color: var(--md-sys-color-on-surface-variant);
}

.forecast-adjustment-admin form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: 1rem;
}

.forecast-adjustment-admin label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.forecast-adjustment-admin input {
  accent-color: var(--md-sys-color-primary);
}

.forecast-adjustment-admin-actions {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: 0.8rem;
}

.forecast-adjustment-admin-actions button {
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: var(--md-sys-shape-full);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.forecast-adjustment-admin-actions button:disabled {
  cursor: default;
  opacity: 0.55;
}

.forecast-adjustment-admin-actions span {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.72rem;
}

.property-admin-intro {
  margin: 0.6rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.78rem;
}

.admin-logout-form button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-lowest);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-logout-form button:hover,
.admin-logout-form button:focus-visible {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container);
}

.admin-logout-form .material-symbols-rounded {
  font-size: 1rem;
}

.property-admin-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr);
  gap: 0.8rem;
  margin-top: 1rem;
}

.property-admin-sensors {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-lowest);
  list-style: none;
}

.property-admin-sensors li + li {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.property-admin-sensors button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem;
  border: 0;
  border-radius: 0;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  text-align: left;
}

.property-admin-sensors button[aria-pressed="true"] {
  background: var(--md-sys-color-primary-container);
}

.property-admin-sensors strong,
.property-admin-sensors small {
  display: block;
}

.property-admin-sensors strong {
  font-size: 0.74rem;
}

.property-admin-sensors small {
  margin-top: 0.1rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.6rem;
}

.property-admin-editor form {
  display: grid;
  gap: 0.65rem;
}

.property-coordinate-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.property-admin-editor label {
  display: grid;
  gap: 0.25rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.68rem;
  font-weight: 700;
}

.property-admin-editor input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  font: inherit;
}

.property-icon-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.property-icon-picker legend {
  margin-bottom: 0.25rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.68rem;
  font-weight: 700;
}

.property-icon-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.property-icon-options label {
  display: block;
  min-width: 0;
}

.property-icon-options input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.property-icon-options label > span {
  display: grid;
  place-items: center;
  min-height: 3.45rem;
  padding: 0.35rem 0.2rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-medium);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-lowest);
  cursor: pointer;
  text-align: center;
}

.property-icon-options small {
  overflow: hidden;
  max-width: 100%;
  font-size: 0.58rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-icon-options input:checked + span {
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
}

.property-icon-options input:focus-visible + span {
  outline: 3px solid var(--brand-citron);
  outline-offset: 2px;
}

.property-admin-map {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large) var(--md-sys-shape-large) 0 0;
  cursor: crosshair;
}

.property-position-marker {
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.property-position-marker-pin {
  fill: var(--brand-black);
}

.property-position-marker-core {
  fill: var(--brand-citron);
}

.property-position-marker-icon {
  fill: var(--brand-black);
  font-family: "Material Symbols Rounded";
  font-size: 13px;
  font-feature-settings: "liga";
  text-anchor: middle;
}

.property-admin-editor .map-attribution {
  margin-top: -0.65rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-top: 0;
  border-radius: 0 0 var(--md-sys-shape-large) var(--md-sys-shape-large);
}

.property-admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.property-admin-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.property-admin-actions span {
  margin-right: auto;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.64rem;
}

.material-inline-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.station-map {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-1);
}

.station-map-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 640 / 520;
  background: #d9d8d1;
}

.station-map-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

.station-map-overlay {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.85));
  pointer-events: none;
}

.map-north {
  fill: var(--brand-black);
  font: 700 13px "Google Sans Flex", sans-serif;
  paint-order: stroke;
  stroke: var(--brand-white);
  stroke-width: 3px;
}

.map-north-arrow {
  fill: none;
  stroke: var(--brand-black);
  stroke-width: 3;
}

.farm-marker {
  fill: var(--brand-citron);
  stroke: var(--brand-black);
  stroke-width: 3;
}

.station-marker {
  cursor: pointer;
  pointer-events: all;
}

.station-marker-hit-target {
  cursor: pointer;
  pointer-events: all;
}

.station-marker-hit {
  fill: transparent;
  stroke: none;
}

.station-marker-dot {
  fill: var(--brand-lavender);
  stroke: var(--brand-white);
  stroke-width: 2;
}

.station-marker:hover .station-marker-dot,
.station-marker:focus .station-marker-dot,
.station-marker.related-hover .station-marker-dot,
.station-marker.selected .station-marker-dot {
  fill: var(--brand-black);
  stroke: var(--brand-citron);
  stroke-width: 4;
}

.station-marker text {
  fill: var(--brand-white);
  font: 700 11px "Google Sans Flex", sans-serif;
  pointer-events: none;
}

.map-style-controls {
  position: absolute;
  z-index: 2;
  bottom: 0.65rem;
  left: 0.65rem;
  display: flex;
  gap: 0.45rem;
  pointer-events: none;
}

.map-style-button {
  position: relative;
  width: 3rem;
  min-width: 2.75rem;
  height: 3rem;
  min-height: 2.75rem;
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--brand-white);
  border-radius: var(--md-sys-shape-small);
  background: var(--brand-black);
  box-shadow: var(--md-sys-elevation-2);
  pointer-events: auto;
}

.map-style-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}

.map-style-button span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.2rem 0.25rem;
  color: var(--brand-white);
  background: rgba(0, 0, 0, 0.76);
  font-size: 0.5rem;
  line-height: 1;
  text-align: center;
}

.map-style-button:hover:not(:disabled) {
  border-color: var(--brand-citron);
  background: var(--brand-black);
}

.map-style-button[aria-pressed="true"] {
  border-color: var(--brand-citron);
}

.map-style-button[aria-pressed="true"] span {
  background: var(--brand-black);
}

.map-attribution {
  margin: 0;
  padding: 0.3rem 0.45rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-lowest);
  font-size: 0.58rem;
  line-height: 1.35;
  text-align: right;
}

.map-attribution a {
  color: inherit;
}

.nearby-station-list {
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
  list-style: none;
}

.nearby-station-list li {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.nearby-station-list li:last-child {
  border-bottom: 0;
}

.nearby-station-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem;
  border: 0;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  text-align: left;
}

.nearby-station-select:hover,
.nearby-station-select:focus-visible,
.nearby-station-item.selected > .nearby-station-select {
  background: var(--md-sys-color-primary-container);
}

.station-number {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  font-size: 0.7rem;
  font-weight: 700;
}

.station-label,
.station-reading {
  display: block;
  min-width: 0;
}

.station-label strong {
  display: block;
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-reading {
  margin-top: 0.15rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.68rem;
}

.station-current {
  margin: 0 0.7rem 0.7rem 3.1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.station-current-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.66rem;
  line-height: 1.35;
}

.station-current-metrics strong {
  font-weight: 700;
}

.station-current-meta,
.station-current-empty {
  margin: 0.35rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.6rem;
  line-height: 1.35;
}

.filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 0.65rem;
  margin: 0.8rem 0 1rem;
}

.history-filter-disclosure > summary {
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-small);
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container-lowest);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
}

.history-cards,
.history-cards-empty {
  display: none;
}

.history-cards {
  margin: 0.65rem 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-1);
  list-style: none;
}

.history-cards li {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.history-cards li:last-child {
  border-bottom: 0;
}

.history-card {
  padding: 0.55rem 0.65rem;
}

.history-card-primary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.history-card-primary time {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.66rem;
  font-weight: 700;
}

.history-card-primary > strong {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.history-card-primary > strong small {
  margin-left: 0.1rem;
  font-family: inherit;
  font-size: 0.45em;
}

.history-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  margin-top: 0.2rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.62rem;
  line-height: 1.35;
}

.history-card details {
  margin-top: 0.25rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.6rem;
}

.history-card details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.6rem;
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
  min-height: 2.75rem;
}

.history-card details summary::-webkit-details-marker {
  display: none;
}

.history-card details summary::after {
  content: "›";
  font-size: 1.15rem;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

.history-card details[open] summary::after {
  transform: rotate(-90deg);
}

.history-card details span,
.history-card details small {
  display: block;
  margin-top: 0.15rem;
}

.filters label {
  display: grid;
  gap: 0.4rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.filters select,
.filters input {
  min-width: 0;
  width: 100%;
  padding: 0.55rem 0.7rem;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-large);
  box-shadow: var(--md-sys-elevation-1);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--md-sys-color-surface-container-lowest);
  font-size: 0.8rem;
}

th,
td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
  font-size: 0.7rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

tbody tr:nth-child(even) {
  background: var(--md-sys-color-surface-container-low);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.source-kind,
td small {
  display: block;
}

td small {
  margin-top: 0.2rem;
  color: var(--md-sys-color-on-surface-variant);
}

.empty {
  padding: 2rem;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.pagination {
  justify-content: flex-end;
  margin-top: 0.7rem;
}

.page-label {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.78rem;
  font-weight: 700;
}

.credits {
  margin: 1.5rem auto 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.65rem;
  line-height: 1.45;
  text-align: center;
}

.credits summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.credits summary::-webkit-details-marker {
  display: none;
}

.credits summary::after {
  margin-left: 0.3rem;
  content: "+";
}

.credits details[open] summary::after {
  content: "−";
}

.credit-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

/* hide the separator after the final data-source attribution */
.credit-list > [aria-hidden="true"]:last-child {
  display: none;
}

.project-credit {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}

.credits a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* compact tablet condition details */
@media (max-width: 68rem) {
  .compact-condition .condition-detail {
    min-height: 3.5625rem;
  }

  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* retain useful tablet columns */
@media (max-width: 55rem) {
  .compact-condition,
  .air-quality-condition {
    grid-column: span 6;
  }

  .compact-condition .condition-detail {
    min-height: 0;
  }
}

/* condense phone layout */
@media (max-width: 42rem) {
  .shell {
    display: block;
    width: min(100% - 1rem, 78rem);
    padding: 0.55rem 0 calc(6rem + env(safe-area-inset-bottom));
  }

  /* retain phone content insets without narrowing the sticky header backdrop */
  .shell:has(> :is(.home-masthead, .forecast-masthead)) {
    --weather-page-gutter: 0.5rem;
  }

  .shell:has(> :is(.home-masthead, .forecast-masthead)) > .weather-content {
    margin-inline: var(--weather-page-gutter);
  }

  .section-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    position: fixed;
    z-index: 20;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.45rem max(0.25rem, env(safe-area-inset-right)) calc(0.45rem + env(safe-area-inset-bottom)) max(0.25rem, env(safe-area-inset-left));
    border: 1px solid var(--md-sys-color-outline-variant);
    border-bottom: 0;
    border-radius: 0;
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--md-sys-elevation-2);
  }

  .section-nav a {
    gap: 0.1rem;
    min-width: 0;
    min-height: 3.75rem;
    padding: 0.2rem 0.05rem;
    font-size: 0.65rem;
  }

  .section-nav-icon {
    width: 2.75rem;
    height: 2rem;
  }

  .section-nav .material-symbols-rounded {
    font-size: 1.3rem;
  }

  .home-masthead {
    --masthead-content-height: 2.35rem;
  }

  .masthead {
    --masthead-title-size: clamp(1.25rem, 6.25vw, 1.65rem);

    gap: 0.5rem;
    padding: 0.2rem 0 0.7rem;
  }

  .masthead h1 {
    min-width: 0;
    overflow: hidden;
    font-size: var(--masthead-title-size);
    line-height: 1;
    text-overflow: ellipsis;
  }

  h2 {
    font-size: 1.55rem;
  }

  .eyebrow {
    margin-bottom: 0.3rem;
    font-size: 0.6rem;
  }

  .panel {
    margin-top: 0.65rem;
    padding: 0;
    box-shadow: none;
  }

  .section-heading {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
  }

  /* retain a full-width mobile range below the original header controls */
  .forecast-masthead {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .forecast-masthead .masthead-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .forecast-range-selector {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .alert-list {
    grid-template-columns: 1fr;
    margin-top: 0.65rem;
  }

  .current-conditions {
    gap: 0.45rem;
    margin-top: 0.65rem;
  }

  .indoor-house-panel {
    margin-top: 0.65rem;
    padding: 1rem 0.75rem;
    border-radius: var(--md-sys-shape-medium);
  }

  .admin-soil-map-panel {
    margin-top: 0.65rem;
    padding: 1rem 0.75rem;
    border-radius: var(--md-sys-shape-medium);
  }

  .indoor-house-heading {
    justify-content: flex-start;
  }

  .indoor-house-illustration {
    --indoor-house-roof-height: 4.8rem;

    width: calc(100% - 2rem);
  }

  .indoor-house-roof {
    right: -1rem;
    left: -1rem;
  }

  .indoor-house-level {
    min-height: 4.25rem;
    padding: 0.65rem 0.9rem;
  }

  .indoor-house-level > span:first-child {
    font-size: 0.68rem;
  }

  .temperature-condition,
  .wind-condition,
  .rain-condition,
  .air-quality-condition,
  .compact-condition {
    grid-column: span 6;
  }

  .temperature-condition,
  .wind-condition {
    min-height: 9.5rem;
  }

  .condition-card {
    min-height: 5.7rem;
    border-radius: var(--md-sys-shape-medium);
  }

  .condition-card-content,
  .temperature-condition .condition-card-content,
  .wind-condition .condition-card-content {
    padding: 0.6rem 0.65rem;
  }

  .condition-card-heading {
    gap: 0.3rem;
  }

  .condition-label {
    gap: 0.2rem;
    font-size: 0.62rem;
  }

  .condition-label .material-symbols-rounded {
    font-size: 0.95rem;
  }

  .condition-status {
    max-width: 7rem;
    padding: 0.2rem 0.35rem;
    font-size: 0.56rem;
  }

  .temperature-condition .condition-label {
    gap: 0.08rem;
    font-size: 0.56rem;
  }

  /* shorten only the homepage temperature heading */
  .temperature-condition .condition-label-suffix {
    display: none;
  }

  .temperature-condition .condition-label .material-symbols-rounded {
    font-size: 0.85rem;
  }

  .temperature-condition .condition-status {
    padding-right: 0.3rem;
    padding-left: 0.3rem;
    font-size: 0.52rem;
  }

  .condition-body {
    gap: 0.3rem;
    margin-top: 0.45rem;
  }

  .condition-primary strong {
    font-size: clamp(1.8rem, 8vw, 2.45rem);
  }

  /* keep both secondary dividers below the taller of the primary and cloud extrema */
  .rain-condition .condition-primary,
  .clouds-condition .condition-primary {
    min-height: max(2.1rem, clamp(1.8rem, 8vw, 2.45rem));
  }

  /* align pressure readings with neighboring compact cards */
  .pressure-condition .condition-card-heading {
    min-height: 1.02rem;
  }

  .pressure-condition .condition-label {
    font-size: 0.56rem;
    gap: 0.1rem;
  }

  .pressure-condition .condition-label .material-symbols-rounded {
    font-size: 0.85rem;
  }

  .pressure-condition .condition-status {
    max-width: 3.4rem;
    padding: 0.18rem 0.25rem;
    font-size: 0.5rem;
  }

  .pressure-condition .condition-primary strong {
    font-size: clamp(1.65rem, 7vw, 2.25rem);
  }

  .condition-secondary {
    gap: 0.2rem;
    margin-top: 0.35rem;
  }

  .condition-body-secondary {
    --condition-secondary-height: 3.5rem;
  }

  .condition-body-secondary .condition-secondary {
    padding-bottom: 0.35rem;
  }

  .wind-condition .condition-forecast-reading:last-child,
  .rain-condition .condition-forecast-reading:last-child,
  .tide-condition .condition-forecast-reading:last-child {
    padding-top: 1.35rem;
  }

  .wind-condition .condition-secondary {
    margin-top: 0.35rem;
  }

  .condition-secondary > span {
    font-size: 0.62rem;
  }

  .condition-secondary strong {
    font-size: 1.45rem;
  }

  /* fit clock ranges and allow repeated-hour zone labels to wrap */
  .clouds-condition .condition-secondary strong {
    font-size: clamp(1rem, 4.7vw, 1.45rem);
    line-height: 1.05;
    white-space: normal;
  }

  .clouds-condition .condition-secondary-paired {
    column-gap: 0.4rem;
  }

  .clouds-condition .condition-secondary-comparison > span {
    font-size: 0.48rem;
  }

  .clouds-condition .condition-secondary-paired strong {
    overflow-wrap: anywhere;
  }

  .clouds-condition .condition-secondary-comparison > strong {
    font-size: 0.92rem;
  }

  .clouds-condition .condition-secondary-paired small {
    font-size: 0.6em;
  }

  .condition-detail {
    display: none;
  }

  .condition-forecast {
    gap: 0.18rem;
  }

  .condition-forecast-label {
    font-size: 0.48rem;
  }

  .condition-forecast-reading {
    gap: 0.18rem;
  }

  .condition-forecast strong {
    font-size: 0.92rem;
  }

  .provenance {
    margin-top: 0.5rem;
    font-size: 0.65rem;
  }

  .forecast-chart-shell,
  .trend-grid,
  .property-map-layout,
  .station-map-layout {
    margin-top: 0.65rem;
  }

  .forecast-chart-grid {
    --forecast-sticky-label-top: calc(var(--weather-sticky-header-height, 0px) + 0.25rem);
    gap: 0.35rem;
  }

  .forecast-chart {
    border-radius: var(--md-sys-shape-medium);
  }

  .forecast-chart-heading {
    padding: 0.42rem 0.5rem;
  }

  .forecast-chart-heading h3 {
    gap: 0.22rem;
    font-size: 0.72rem;
  }

  .forecast-chart-heading .material-symbols-rounded {
    font-size: 0.95rem;
  }

  .forecast-chart-day-start b {
    top: 1.7rem;
    left: 0.1rem;
    padding: 0.12rem 0.18rem;
    font-size: 0.44rem;
  }

  .forecast-chart-scale {
    right: 0.35rem;
    font-size: 0.5rem;
  }

  .forecast-chart-scale-maximum {
    top: 0.35rem;
  }

  .forecast-chart-scale-minimum {
    bottom: 0.35rem;
  }

  .forecast-chart-plot {
    height: 6.2rem;
  }

  .forecast-chart-value {
    gap: 0.08rem;
    padding: 0.28rem 0.36rem;
  }

  .forecast-chart-value small {
    font-size: 0.48rem;
  }

  .forecast-chart-value strong {
    font-size: 0.64rem;
  }

  .forecast-crosshair-label time {
    padding: 0.25rem 0.4rem;
    font-size: 0.6rem;
  }

  .forecast-x-axis {
    bottom: calc(4.65rem + 1px + env(safe-area-inset-bottom));
    font-size: 0.54rem;
  }

  .forecast-weather-map {
    margin-top: 0.4rem;
    border-radius: var(--md-sys-shape-medium);
  }

  .forecast-map-layer-controls {
    top: 0.4rem;
    right: 0.4rem;
    left: 0.4rem;
    justify-content: space-between;
    gap: 0.1rem;
    padding: 0.18rem;
  }

  .forecast-map-layer-controls button {
    flex: 1 1 0;
    justify-content: center;
    min-height: 2.1rem;
    gap: 0.18rem;
    padding: 0.28rem 0.3rem;
    font-size: 0.56rem;
  }

  .forecast-map-layer-controls .material-symbols-rounded {
    font-size: 0.9rem;
  }

  .forecast-map-place-layer text {
    font-size: 11px;
  }

  .trend-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .trend-chart {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .trend-chart-frame {
    --trend-mobile-landscape-width: calc(100svh - 10rem - env(safe-area-inset-bottom));
    height: var(--trend-mobile-landscape-width);
    container-type: size;
  }

  /* rotate only the plot into a phone-width landscape frame */
  .trend-chart-viewport {
    container-type: size;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .trend-chart-landscape {
    width: 100cqh;
    min-width: 100cqh;
    height: 100cqw;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
  }

  .trend-chart-fixed-chrome {
    right: auto;
    bottom: auto;
    width: 100cqh;
    height: 100cqw;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
  }

  .trend-chart-landscape > svg {
    inset: 0;
  }

  .trend-metric-control {
    top: 0.4rem;
    bottom: auto;
    left: 50%;
  }

  .trend-chart-title {
    font-size: 0.78rem;
  }

  .trend-metric-caret {
    width: 0.38rem;
    height: 0.38rem;
    border-width: 0 0.1rem 0.1rem 0;
  }

  .trend-metric-flyover {
    top: calc(100% + 0.2rem);
    min-width: 8.5rem;
    padding: 0.25rem;
  }

  .trend-metric-option {
    min-height: 1.7rem;
    padding: 0.25rem 0.45rem;
    font-size: 0.6rem;
  }

  .trend-chart-range {
    top: 2.8rem;
    right: 0.55rem;
    font-size: 0.54rem;
  }

  .trend-mode-toggle {
    top: 0.45rem;
    right: 0.55rem;
    padding: 0.34rem 0.52rem;
    font-size: 0.56rem;
  }

  .trend-detail-toggle {
    top: 0.45rem;
    right: auto;
    bottom: auto;
    left: 0.55rem;
    padding: 0.34rem 0.52rem;
    font-size: 0.56rem;
  }

  .trend-toggle-icon {
    width: 0.82rem;
    height: 0.74rem;
  }

  .trend-month-axis {
    bottom: 0.22rem;
  }

  .trend-month-label {
    font-size: 0.54rem;
  }

  .trend-y-axis {
    left: 0.1rem;
    font-size: 0.47rem;
  }

  .trend-crosshair-summary {
    gap: 0.16rem;
  }

  .trend-crosshair-values {
    gap: 0.14rem 0.25rem;
    padding: 0.22rem 0.28rem;
    font-size: 0.5rem;
  }

  .trend-crosshair-value {
    grid-template-columns: 0.5rem max-content auto;
    gap: 0.16rem;
  }

  .trend-chart-legend {
    top: auto;
    right: auto;
    bottom: calc(12% + 0.4rem);
    left: 50%;
    max-width: 88%;
    gap: 0.2rem 0.4rem;
    padding: 0.28rem 0.35rem;
    font-size: 0.52rem;
  }

  .trend-chart-legend.trend-chart-legend-top {
    top: calc(15% + 0.4rem);
    bottom: auto;
  }

  .station-map-layout {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .map-style-controls {
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    justify-content: flex-start;
    gap: 0.3rem;
  }

  .map-style-button {
    width: 3rem;
    height: 3rem;
  }

  .nearby-station-select {
    min-height: 2.75rem;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
  }

  .station-number {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.62rem;
  }

  .station-label strong {
    font-size: 0.7rem;
  }

  .station-reading {
    font-size: 0.6rem;
  }

  .station-current {
    margin: 0 0.55rem 0.55rem 2.55rem;
    padding-top: 0.4rem;
  }

  .unit-settings-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0.5rem 0 0;
  }

  .history-filter-disclosure > summary {
    margin-top: 0.5rem;
  }

  .filters button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .table-scroll {
    display: none;
  }

  .history-cards {
    display: block;
  }

  .history-cards-empty {
    display: block;
    margin: 0.65rem 0 0;
    padding: 0.75rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-container-lowest);
  }

  .pagination {
    margin-top: 0.5rem;
  }

  .credits {
    margin-top: 0.8rem;
    font-size: 0.56rem;
  }

}

@media (max-width: 42rem) {
  .adjustment-scorecard-grid {
    grid-template-columns: 1fr;
  }

  .adjustment-scorecard-publication,
  .adjustment-scorecard-identities,
  .adjustment-scorecard-support,
  .adjustment-scorecard-diagnostic dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adjustment-scorecard-reliability li {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-map-panel {
    margin-bottom: 1rem;
  }

  .property-map-layout,
  .property-admin-layout {
    margin-top: 0.65rem;
  }

  .property-map-layout {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .property-sensor-list-shell {
    position: static;
  }

  .property-sensor-list {
    position: static;
    overflow-y: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  .property-admin-layout {
    grid-template-columns: 1fr;
  }

  .property-admin-sensors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-admin-sensors li + li {
    border-top: 0;
  }

  .property-admin-sensors li:nth-child(even) {
    border-left: 1px solid var(--md-sys-color-outline-variant);
  }

  .property-admin-sensors li:nth-child(n + 3) {
    border-top: 1px solid var(--md-sys-color-outline-variant);
  }

  .property-admin-sensors button {
    min-height: 4rem;
  }

  .property-coordinate-fields {
    gap: 0.4rem;
  }

  .property-icon-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-admin-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .property-admin-actions button {
    justify-content: center;
    width: 100%;
  }
}

/* minimize motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* keep experimental cloud provenance visible even on compact phone cards */
.solar-cloud-estimate .condition-detail {
  display: block;
  min-height: 0;
  padding-top: 0.4rem;
  font-size: 0.62rem;
}