@layer pages {
.site-page--tropical-overview {
  --page-title-color: gold;
  --page-title-weight: 800;
  --page-title-shadow: 4px 4px 0 rgba(0, 0, 0, 0.98);
  background:
    linear-gradient(rgba(103, 103, 103, 0.7), rgba(103, 103, 103, 0.7)),
    url('../images/isabel_bg.webp') top / cover fixed;
}

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

.tropical-weather-center .page-header--weather {
  margin-bottom: 10px;
}

.tabset--tropical-basin {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.subtabs--tropical-section {
  display: flex;
}

.subtabs--tropical-section .subtabs__tab {
  flex: 1 1 0;
}

.tabset--tropical-basin .tabset__tab span {
  white-space: normal;
}

.tropical-current-systems {
  margin-top: 2px;
}

#active-systems-summary,
.tropical-system-grid {
  min-width: 0;
}

.tropical-system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 8px;
  margin: 1em 0 0;
}

.tropical-current-systems .county-alert-chip {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: auto;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(171, 198, 218, 0.46);
  border-left: 5px solid var(--county-alert-color, #dc3545);
  border-radius: 9px;
  text-decoration: none;
  border-color: var(--color-accent);
  background-color: var(--color-alert);
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  text-align: left;
  box-shadow: 0 4px 12px rgba(4, 10, 16, 0.18);
  margin: 0 0 10px 0;
}

.tropical-current-systems .county-alert-chip > i {
  flex: 0 0 auto;
  color: var(--county-alert-color, #dc3545);
  font-size: 1.12rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65));
}

.tropical-current-systems .county-alert-chip-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
}

.tropical-current-systems .county-alert-chip-copy strong,
.tropical-current-systems .county-alert-chip-copy span {
  white-space: normal;
  font-size: clamp(0.7rem, 2vw, 0.9rem);
}

.tropical-current-systems .county-alert-chip-copy strong {
  line-height: 1.15;
  text-transform: uppercase;
}

.tropical-current-systems .county-alert-chip-copy span {
  color: #f4dede;
}

.tropical-current-systems .county-alert-chip:hover,
.tropical-current-systems .county-alert-chip:focus-visible {
  border-color: #fff200;
  background: #a40000;
}

.tropical-current-systems .county-alert-chip:focus-visible {
  outline: 2px solid #fff200;
  outline-offset: 2px;
}

.tropical-weather-center .map-toolbar--tropical-overview {
  justify-content: space-between;
}

.tropical-weather-center .map-toolbar--tropical-overview .map-toolbar__label {
  min-width: 50%;

  font-family: "Montserrat", Arial, sans-serif;
}

.tropical-source-link,
.tropical-action {
  display: inline-flex;
  min-height: var(--control-target-min, 24px);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 7px;
  border: 1px solid rgba(164, 190, 211, 0.62);
  border-radius: 8px;
  background: #173750;
  color: #f5f9fc;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.5rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}

.tropical-source-link:hover,
.tropical-source-link:focus-visible,
.tropical-action:hover,
.tropical-action:focus-visible {
  border-color: #fff200;
  background: #1c405d;
  color: #fff;
}

.tropical-source-link:focus-visible,
.tropical-action:focus-visible {
  outline: 2px solid #fff200;
  outline-offset: 2px;
}

#tropical-map,
#tropical-satellite-map {
  height: var(--weather-map-block-size);
}

#tropical-map-timestamp,
#tropical-satellite-timestamp {
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
}

.tropical-mobile-legend {
  display: none;
}

.tropical-product-tabs .tropical-product-tab {
  flex: 1 0 8rem;
}

.tropical-product-panel {
  display: grid;
  min-height: var(--weather-map-block-size);
  box-sizing: border-box;
  align-content: start;
  gap: 14px;
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.125rem);
  background: #07111b;
}

.tropical-product-panel h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.official-graphic {
  display: grid;
  min-width: 0;
  min-height: calc(var(--weather-map-block-size) - 78px);
  place-items: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(164, 190, 211, 0.36);
  border-radius: 9px;
  background: #020817;
}

.official-graphic img {
  display: block;
  width: 100%;
  /* max-height: calc(var(--weather-map-block-size) - 90px); */
  object-fit: contain;
}

.tropical-text-content {
  width: 100%;
  max-height: calc(var(--weather-map-block-size) - 104px);
  box-sizing: border-box;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(164, 190, 211, 0.36);
  border-radius: 9px;
  background: #020817;
  color: #dbeafe;
  font-family: "Fira Code", sans-serif, monospace;
  font-weight: 500;
  font-size: clamp(0.7rem, 1.5vw, 0.84rem);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.tropical-weather-center .map-toolbar--satellite {
  gap: 10px 14px;
}

.tropical-weather-center .map-toolbar--satellite label {
  color: #cbdbe6;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 650;
}

.tropical-weather-center .map-toolbar--satellite .field__control {
  min-width: 170px;
}

.tropical-panel__satellite .weather-map__fallback img {
  height: var(--weather-map-block-size);
  max-height: var(--weather-map-block-size);
}

.tropical-satellite-link {
  margin: 10px 12px;
}

/* Fit desktop graphics to the map panel height; preserve phone landscape sizing. */
@media (min-width: 769px) and (min-height: 501px),
       (min-width: 1025px),
       (min-width: 769px) and (pointer: fine) {
  #tropical-panel-imagery .tropical-product-panel {
    height: var(--weather-map-block-size);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  #tropical-panel-imagery .official-graphic {
    min-height: 0;
  }

  #tropical-panel-imagery .official-graphic img {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .tropical-weather-center .weather-map-card {
    --weather-map-min-block-size: 20.625rem;
    --weather-map-max-block-size: 23.75rem;
    --weather-map-stack-offset: 31rem;
  }

  .tropical-product-tabs {
    display: flex;
  }

  .tropical-product-tabs .tropical-product-tab {
    flex: 1 1 0;
  }

  .tropical-weather-center .map-toolbar--satellite {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tropical-weather-center .map-toolbar--satellite .field--map-product,
  .tropical-weather-center .map-toolbar--satellite .field__control {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .tropical-system-grid {
    grid-template-columns: repeat(2, minmax(auto, 1fr));
  }

  .tropical-system-grid > :only-child {
    grid-column: 1 / -1;
  }

  .tropical-mobile-legend {
    display: grid;
    gap: 7px;
    padding: 9px 12px;
    border-top: 1px solid rgba(177, 201, 220, 0.22);
    background: #081d31;
    color: #d7e2ea;
    font: 0.68rem/1.4 "Fira Code", monospace;
  }

  .tropical-mobile-legend p,
  .tropical-mobile-legend ul {
    margin: 0;
  }

  .tropical-mobile-legend ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 9px;
    padding: 0;
    list-style: none;
  }

  .tropical-mobile-legend li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
  }

  .official-graphic {
    min-height: calc(var(--weather-map-block-size) - 58px);
  }

  .tropical-weather-center .map-toolbar--satellite {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .tropical-weather-center .weather-map-card {
    --weather-map-min-block-size: 20rem;
    --weather-map-max-block-size: 31rem;
  }

  .tropical-source-link {
    width: auto;
  }
}

@media (max-height: 43.75rem) {
  .tropical-weather-center .weather-map-card {
    --weather-map-min-block-size: 12rem;
  }
}
}