@import url("/map-controls-layout.css?v=dashboard-20261006");
/* A brief opening message in the same content column as the map and chapters. */
body.ao-main .ao-homepage-intro {
  margin: 0 0 32px;
  color: #0f0f0f;
}
body.ao-main .ao-homepage-intro h2 {
  margin: 0 0 14px;
}
body.ao-main .ao-homepage-intro p {
  margin: 0;
  max-width: 760px;
  color: #55534f;
}
@media (max-width: 600px) {
  body.ao-main .ao-homepage-intro { margin-bottom: 24px; }
}

body.ao-main #nao-history .nao-intro {
  margin: 0 0 24px;
  max-width: 760px;
  color: #55534f;
}

body.ao-main #nao-history > summary {
  display: block;
  list-style: none;
}
body.ao-main #nao-history > summary::-webkit-details-marker {
  display: none;
}
body.ao-main #nao-history > summary::marker {
  content: "";
}

/* Historical charts follow the same content edges as RAPID and NAO. */
body.ao-main #atlantic-records .history-card,
body.ao-main #atlantic-records .history-workspace-selector {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
body.ao-main #atlantic-records .history-slider {
  margin-inline: 0;
  box-sizing: border-box;
}

/* Compact map guidance; runtime bindings stay available for each layer. */
body.ao-main #explorer-settings .privacy-preferences {
  margin: 0;
  padding: 12px 0 0;
  border: 0;
}
body.ao-main .map-help-group h3 {
  font-size: 18px;
  margin: 16px 0 8px;
}
body.ao-main .map-help-group p { max-width: 760px; }
body.ao-main .forecast-details p:empty { display: none; }

/* Below the map: optional tools and separate official forecast references. */
body.ao-main #below-map-options {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.ao-main #below-map-options > details {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 0;
  background: none;
}
body.ao-main #below-map-options > details::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ao-divider-inset,24px);
  right: var(--ao-divider-inset,24px);
  height: 1px;
  background: #fff;
  pointer-events: none;
}
body.ao-main #below-map-options > details > summary {
  min-height: 48px;
  padding: 12px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #0f0f0f;
}
body.ao-main .ao-map-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 32px;
  padding: 4px 0 16px;
}
body.ao-main #map-tools :is(.forecast-details,#explorer-settings) {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
body.ao-main #map-tools h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 10px;
}
body.ao-main #map-tools p,
body.ao-main #sea-area-tools p {
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0 12px;
  max-width: 760px;
}
body.ao-main #map-tools .refresh-row { display: block; margin: 12px 0 0; }
body.ao-main #map-tools :is(.forecast-details,.refresh-row,.privacy-preferences)::before { content: none; }
body.ao-main #map-tools .privacy-preferences { padding: 0; }
body.ao-main #map-tools .privacy-preferences label { font-weight: 400; }
body.ao-main #map-tools .privacy-preferences :is(p,a) { font-size: 13px; }
body.ao-main #map-tools .ao-map-tools-documentation { margin: 0 0 16px; }
body.ao-main #sea-area-tools .date-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 4px 0 12px;
}
body.ao-main #sea-area-tools .date-group > label:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
body.ao-main #sea-select { width: min(100%, 360px); min-width: 0; min-height: 44px; }
body.ao-main #below-map-options :is(button,select) { border-radius: 0; }
body.ao-main #below-map-options [hidden] { display: none !important; }
@media(max-width:600px) {
  body.ao-main .ao-map-tools-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.ao-main #sea-area-tools .date-group > label:first-child { flex-basis: 100%; }
  body.ao-main #sea-select { width: 100%; }
}

/* Stage one: layer choices, conditional display controls and a single guide line. */
body.ao-main #ao-maps .ao-map-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 16px;
  margin: 0 0 16px;
}
body.ao-main .ao-map-controls > .segmented {
  min-width: 0;
  flex-wrap: wrap;
  padding: 0;
  gap: 4px;
}
body.ao-main .ao-map-controls :is(button, label, .ao-sst-controls) {
  font-family: var(--ao-type-sans);
  font-size: 14px;
  line-height: 1.5;
}
body.ao-main .ao-map-controls > .segmented button {
  min-height: 44px;
  padding: 9px 10px;
}
body.ao-main .ao-map-controls > .map-label-toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.ao-main .ao-map-view-options {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body.ao-main .ao-map-view-options:not(:has(> :not([hidden]))) { display: none; }
body.ao-main .ao-map-view-options :is(.ao-sst-controls, #wave-fields) {
  margin: 0;
  padding: 0;
  max-width: 100%;
}
body.ao-main .ao-map-view-options #wave-fields { flex-wrap: wrap; gap: 4px; }
body.ao-main .ao-map-view-options #wave-fields button { min-height: 44px; }
body.ao-main #sst-fields .ao-sst-note,
body.ao-main #air-toggle-note:empty { display: none; }
body.ao-main #ao-maps .ao-map-introduction {
  border: 0 !important;
  padding: 0;
  margin: 0 0 18px;
  background: transparent;
}
body.ao-main #ao-maps .ao-map-introduction #map-guide-key {
  font-family: var(--ao-type-sans);
  font-size: 14px;
  line-height: 1.6;
  max-width: 760px;
  color: #55534f;
  margin: 0;
}
/* Match the polar mobile controls: equal columns and clear groups. */
@media (max-width: 600px) {
  body.ao-main .atlantic-start > div:not(.atlantic-explorer-heading) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
  }
  body.ao-main .atlantic-start [data-atlantic] {
    width: 100%;
    min-width: 0;
    padding: 8px;
    text-align: left;
  }
  body.ao-main #ao-maps .ao-map-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }
  body.ao-main .ao-map-controls > .segmented {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
  }
  body.ao-main .ao-map-controls > .segmented button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 8px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
  }
  body.ao-main .ao-map-controls .ao-icon { flex-shrink: 0; }
  body.ao-main .ao-map-controls > .map-label-toggle { margin: 0; }
  body.ao-main .ao-map-view-options { gap: 8px; }
  body.ao-main .ao-map-view-options #wave-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    width: 100%;
  }
  body.ao-main .ao-map-view-options #wave-fields button {
    min-width: 0;
    padding: 8px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
  }
  body.ao-main .compact-timeline .timeline-actions { gap: 12px; }
  body.ao-main .compact-timeline .timeline-navigation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  body.ao-main .compact-timeline .timeline-navigation button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    line-height: 1.4;
  }
  body.ao-main .compact-timeline .exact-time { gap: 8px; }
  body.ao-main .compact-timeline .exact-time select { width: 100%; }
}

/* Stage two: selected-location readings and the direction, without nested details. */
body.ao-main #reading > #metrics {
  margin: 16px 0 0;
}
body.ao-main #reading > #metrics:empty { display: none; }
body.ao-main #reading > #metrics .metric-row {
  align-items: baseline;
  flex-wrap: wrap;
  padding: 12px 0;
}
body.ao-main #reading > .change-note {
  margin-top: 16px;
  padding-top: 12px;
}
body.ao-main #reading > .change-note p {
  margin: 0;
  color: #55534f;
}
body.ao-main #reading > :is(#selected-reading-date, #selected-reading-warning) {
  margin-top: 8px;
}
body.ao-main #reading > p:has([data-method-link="main-map"]) {
  margin-top: 18px;
}
body.ao-main #map-source-bindings[hidden],
body.ao-main #published-observation[hidden] { display: none !important; }

body.ao-main #published-observation > .eyebrow {
  font-family: var(--ao-type-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #d62828;
}

/* Match the polar hierarchy: data type and location precede the reading. */
body.ao-main #reading > .selected-reading-main {
  margin: 20px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #fff;
}
body.ao-main #reading .selected-reading-main #primary-label {
  color: #55534f;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}
body.ao-main #reading .selected-reading-main .value { margin: 14px 0 12px; }
body.ao-main #reading .selected-reading-main :is(#selected-reading-date, #selected-reading-warning) {
  margin-top: 8px;
}

/* A reading is one group; reserve separators for different tasks and records. */
body.ao-main #reading > #metrics { margin-top: 12px; }
body.ao-main #reading > #metrics .metric-row:first-child {
  border: 0;
  padding: 0;
}
body.ao-main #reading > .change-note {
  border: 0;
  margin-top: 14px;
  padding-top: 0;
}