/* Resident page upgrade, 08/10/2026.
   Loaded after every other stylesheet. Rules sit in the existing `readability` layer: an !important
   rule in a layer beats an unlayered !important rule, which is how the earlier sizing rules are written.
   Staff pages and the shared map keep their layout; map rules are scoped to .public-observatory-map. */
@layer readability {
  /* 1. The answer to "is the water OK?" leads the page. */
  body#royal-blue-app .citizen-alert-strip {
    gap: 12px 16px !important; min-height: 76px !important; padding: 16px 20px !important;
    border-left: 6px solid var(--signal) !important; border-radius: 12px !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--signal) 14%, transparent);
  }
  body#royal-blue-app .citizen-alert-strip > strong {font-size: 20px !important; line-height: 1.35 !important; white-space: normal !important}
  body#royal-blue-app .citizen-alert-strip > p {font-size: 15px !important; line-height: 1.55 !important; color: #2d4660 !important}
  body#royal-blue-app .citizen-alert-icon {width: 40px !important; height: 40px !important; flex: none}
  body#royal-blue-app .citizen-alert-strip > button {
    min-height: 44px !important; padding: 8px 14px !important; font-size: 14px !important; background: #fff !important;
    border: 1px solid color-mix(in srgb, var(--signal) 45%, white) !important; border-radius: 10px !important;
  }

  /* 2. Old readings never look current. */
  body#royal-blue-app .citizen-value.is-stale {background: #f3f5f8 !important; border-style: dashed !important}
  body#royal-blue-app .citizen-value.is-stale :is(strong, .citizen-value-icon) {opacity: .62}
  body#royal-blue-app .citizen-value-note.citizen-stale-flag {color: #7a4b00 !important; font-weight: 650 !important; font-size: 12px !important}
  body#royal-blue-app .citizen-stale-note {
    color: #6b4a12 !important; background: #fff6e0; border-left: 3px solid #e0a030 !important;
    padding: 9px 12px !important; border-radius: 0 8px 8px 0; font-size: 13px !important; line-height: 1.55 !important;
  }
  body#royal-blue-app .citizen-sample-age {display: block !important; margin: 3px 0 0 !important; font-size: 13px !important; font-weight: 650; color: #245b8f}
  body#royal-blue-app .citizen-sample-age.is-stale {color: #8a5200}
  body#royal-blue-app .coastal-live-bar em {font-style: normal; font-weight: 650; color: #fff}
  body#royal-blue-app .coastal-live-bar.is-stale {background: #5a3a05d9 !important; color: #ffe6b3 !important; border-top-color: #f0b24a66 !important}
  body#royal-blue-app .coastal-live-bar.is-stale > span > i {background: #ffb84d !important; box-shadow: 0 0 0 3px #ffb84d33 !important}

  /* 3. Small print and touch targets on a phone held in one hand. */
  body#royal-blue-app .citizen-header-search {min-width: 44px !important; min-height: 44px !important}
  body#royal-blue-app .citizen-staff {min-height: 44px !important}
  body#royal-blue-app .citizen-staff-short {font-size: 12px !important}
  body#royal-blue-app .citizen-header nav button {min-height: 44px}
  body#royal-blue-app .coastal-live-bar button {min-height: 44px !important; padding: 8px 12px !important}
  body#royal-blue-app .coastal-point-label em {font-size: 10px !important; padding: 1px 5px !important}
  body#royal-blue-app .coastal-scene-footer {font-size: 12px !important}
  body#royal-blue-app .coastal-scene-footer a {display: inline-flex; align-items: center; min-height: 32px}
  body#royal-blue-app .coastal-sea-label {font-size: 12px !important}
  body#royal-blue-app .citizen-points > summary > span {font-size: 12px !important; color: #506580 !important}
  @media (pointer: coarse), (max-width: 760px) {
    body#royal-blue-app .public-observatory-map .leaflet-control-zoom a {width: 36px !important; height: 36px !important; line-height: 36px !important}
    body#royal-blue-app .public-observatory-map .map-expand-button {width: 40px !important; min-height: 40px !important}
  }

  /* 4. Map controls stop covering the map on phones: they sit in a row under it. */
  @media (max-width: 760px) {
    :root body#royal-blue-app .public-observatory-map:not(.expanded) .river-canvas {height: auto !important; min-height: 0 !important; overflow: visible !important}
    :root body#royal-blue-app .public-observatory-map:not(.expanded) .map-floating-tools {
      position: static !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
      width: auto !important; margin: 8px 0 0 !important; flex-wrap: nowrap !important; gap: 0 !important;
      justify-content: space-between; overflow-x: auto;
    }
    :root body#royal-blue-app .public-observatory-map:not(.expanded) .map-floating-tools button {min-height: 44px !important; padding: 6px 5px !important; white-space: nowrap}
    :root body#royal-blue-app .public-observatory-map:not(.expanded) .map-quick-rotation {gap: 0 !important; flex-wrap: nowrap !important}
  }

  /* Very narrow phones: the sample bar stacks its age line, and the map buttons wrap instead of scrolling. */
  @media (max-width: 480px) {
    body#royal-blue-app .coastal-live-bar {flex-wrap: wrap !important; padding: 8px 16px !important; gap: 2px 12px !important}
    body#royal-blue-app .coastal-live-bar > span {flex: 1 1 100%; flex-wrap: wrap; row-gap: 2px}
    body#royal-blue-app .coastal-live-bar em {flex-basis: 100%; padding-left: 15px}
    body#royal-blue-app .coastal-live-bar button {margin-left: auto}
  }
  @media (max-width: 360px) {
    :root body#royal-blue-app .public-observatory-map:not(.expanded) .map-floating-tools {flex-wrap: wrap !important; justify-content: center; overflow-x: visible}
  }

  /* The point list summary wraps under its title instead of breaking the title. */
  @media (max-width: 560px) {
    body#royal-blue-app .citizen-points > summary {flex-wrap: wrap !important; row-gap: 2px}
    body#royal-blue-app .citizen-points > summary > svg:last-child {order: 2; margin-left: auto !important}
    body#royal-blue-app .citizen-points > summary > span {order: 3; flex: 1 1 100%; margin-left: 27px !important}
  }

  /* 5. Narrow phones keep the status card readable. */
  @media (max-width: 640px) {
    body#royal-blue-app .citizen-alert-strip {flex-wrap: wrap !important; padding: 14px 16px !important}
    body#royal-blue-app .citizen-alert-strip > strong {font-size: 18px !important; flex: 1 1 calc(100% - 60px)}
    body#royal-blue-app .citizen-alert-strip > i {display: none !important}
    body#royal-blue-app .citizen-alert-strip > .citizen-alert-icon {order: 0 !important}
    body#royal-blue-app .citizen-alert-strip > strong {order: 1 !important}
    body#royal-blue-app .citizen-alert-strip > p {flex: 1 1 100% !important; order: 2 !important}
    body#royal-blue-app .citizen-alert-strip > button {flex: 1 1 100% !important; justify-content: center; order: 3 !important}
  }
}