.hrb-live-status {
  --hrb-font-sans: Arial, Helvetica, sans-serif;
  --hrb-blue: #053b91;
  --hrb-blue-dark: #03265f;
  --hrb-orange: #f56318;
  --hrb-ink: #12243a;
  --hrb-muted: #58687a;
  --hrb-line: #dce3eb;
  --hrb-sand: #f5f2eb;
  color: var(--hrb-ink);
  font-family: var(--hrb-font-sans);
  line-height: 1.6;
}

.hrb-live-status :where(button, input, select, textarea) { font: inherit; }
.hrb-live-status :where(h2, h3, h4, strong) { font-family: var(--hrb-font-sans); }

.hrb-live-status-section {
  padding: 4.8rem 0 5.2rem;
  background: var(--hrb-sand);
}

.hrb-live-status-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.8rem;
}

.hrb-live-status-heading h2 {
  margin: 0;
  color: var(--hrb-ink);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.hrb-live-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.hrb-live-status-card {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid var(--hrb-line);
  border-top: 5px solid #7b8795;
  border-radius: .8rem;
  box-shadow: 0 14px 34px rgba(18,36,58,.08);
}

.hrb-live-status-card.is-open { border-top-color: #2caf63; }
.hrb-live-status-card.is-closed { border-top-color: #b75038; }
.hrb-live-status-card.is-partial { border-top-color: #db8c17; }

.hrb-live-status-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

.hrb-live-status-card__top h3 { margin: 0; font-size: 1.25rem; }

.hrb-live-status-badge {
  padding: .3rem .65rem;
  color: #fff;
  background: #7b8795;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.is-open .hrb-live-status-badge { background: #237f49; }
.is-closed .hrb-live-status-badge { background: #a13f2c; }
.is-partial .hrb-live-status-badge { background: #a66500; }
.hrb-live-status-state { min-height: 3.2em; color: var(--hrb-muted); }
.hrb-live-status-details { margin-top: -.35rem; color: #34485f; font-size: .86rem; line-height: 1.45; }

.hrb-live-flag {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--hrb-line);
}

.hrb-live-flag-visual {
  width: 96px;
  height: 64px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--hrb-flag-colour, #e8edf2);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .35rem;
}

.hrb-live-flag-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.hrb-live-flag-visual img[hidden] { display: none; }
.hrb-live-flag div { display: flex; flex-direction: column; }
.hrb-live-flag small { color: var(--hrb-muted); }
.hrb-live-flag strong { color: var(--hrb-ink); }

.hrb-live-weather {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  padding: .8rem;
  color: var(--hrb-ink);
  background: #eef6fb;
  border-radius: .55rem;
}

.hrb-live-weather__symbol {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  color: var(--hrb-blue);
  font-size: 1.65rem;
}

.hrb-live-weather__main,
.hrb-live-weather__wind { display: flex; flex-direction: column; min-width: 0; }
.hrb-live-weather small { color: var(--hrb-muted); font-size: .72rem; }
.hrb-live-weather strong { font-size: .84rem; line-height: 1.25; }
.hrb-live-weather__wind { padding-left: .65rem; border-left: 1px solid #c7d9e7; }
.hrb-live-weather__wind span { color: var(--hrb-muted); font-size: .72rem; }
.hrb-live-weather.is-unavailable { display: block; color: var(--hrb-muted); background: #f1f3f5; }

.hrb-live-tide {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) repeat(3, minmax(120px, 1fr));
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  color: #fff;
  background: var(--hrb-blue);
  border-radius: .8rem;
  box-shadow: 0 12px 28px rgba(7,92,153,.2);
}

.hrb-live-tide__title,
.hrb-live-tide__item { display: flex; flex-direction: column; min-width: 0; }
.hrb-live-tide__title { flex-direction: row; align-items: center; gap: .7rem; }
.hrb-live-tide__title > span { font-size: 2rem; line-height: 1; }
.hrb-live-tide__title > div { display: flex; flex-direction: column; }
.hrb-live-tide small { color: rgba(255,255,255,.78); font-size: .72rem; }
.hrb-live-tide strong { font-size: .9rem; line-height: 1.25; }
.hrb-live-tide__item > span { color: rgba(255,255,255,.78); font-size: .72rem; }
.hrb-live-tide__source { grid-column: 1 / -1; margin-top: -.45rem; text-align: right; }
.hrb-live-tide.is-unavailable { grid-template-columns: 1fr; background: #687789; }
.hrb-live-status-updated,
.hrb-live-status-source { display: block; margin-top: 1rem; color: var(--hrb-muted); }
.hrb-live-status-error { padding: 1rem; border-left: 5px solid #b75038; background: #fff; color: var(--hrb-ink); }

.hrb-live-status-map-wrap {
  margin-top: 1.4rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hrb-line);
  border-radius: .8rem;
  box-shadow: 0 14px 34px rgba(18,36,58,.08);
}

.hrb-live-status-map-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .8rem 1rem;
  color: var(--hrb-ink);
  border-bottom: 1px solid var(--hrb-line);
}

.hrb-live-status-show-all {
  padding: .55rem .8rem;
  color: #fff;
  background: var(--hrb-blue);
  border: 0;
  border-radius: .35rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.hrb-live-status-show-all:hover,
.hrb-live-status-show-all:focus-visible { background: #043e6a; }

.hrb-live-status-map {
  width: 100%;
  height: clamp(220px, 28vw, 300px);
  display: grid;
  place-items: center;
  color: var(--hrb-muted);
  background: #e8edf2;
  z-index: 0;
}

.hrb-live-status-map.leaflet-container { display: block; font-family: var(--hrb-font-sans); }

.hrb-live-status-map-note { margin: 0; padding: .8rem 1rem; color: var(--hrb-muted); font-size: .86rem; }
.hrb-live-status-map .leaflet-control-attribution { font-size: 10px; }
.hrb-live-status-map :where(.leaflet-control, .leaflet-popup, .leaflet-popup-content, .leaflet-tooltip) { font-family: var(--hrb-font-sans); }
.hrb-live-status-map .leaflet-popup-content { margin: 1rem 1.15rem; line-height: 1.5; }
.hrb-map-popup { width: 310px; max-width: calc(100vw - 90px); color: var(--hrb-ink); }
.hrb-map-popup__title { display: block; font-size: 1rem; }
.hrb-map-popup small { display: block; margin-top: .1rem; color: var(--hrb-muted); }

.hrb-map-popup__status {
  display: inline-block;
  margin-top: .6rem;
  padding: .22rem .5rem;
  color: #fff;
  background: #687789;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hrb-map-popup__status.is-open { background: #237f49; }
.hrb-map-popup__status.is-closed { background: #a13f2c; }
.hrb-map-popup p { margin: .65rem 0; }

.hrb-map-popup__flag {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--hrb-line);
}

.hrb-map-popup__flag-heading {
  margin-bottom: .35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hrb-map-popup__flag-visual {
  width: 100%;
  height: 138px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  background: #eef2f6;
  border: 1px solid #d5dee8;
  border-radius: .45rem;
}

.hrb-map-popup__flag-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.hrb-map-popup__flag-visual span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 1rem;
  color: var(--hrb-ink);
  text-align: center;
  font-size: .78rem;
}

.hrb-map-popup__flag > strong { display: block; margin-top: .45rem; font-size: .9rem; line-height: 1.3; }

.hrb-map-popup__facts { margin: .65rem 0; padding: .55rem 0; border-top: 1px solid var(--hrb-line); border-bottom: 1px solid var(--hrb-line); }
.hrb-map-popup__fact { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: .4rem; margin: .18rem 0; font-size: .78rem; }
.hrb-map-popup__fact dt { color: var(--hrb-muted); }
.hrb-map-popup__fact dd { margin: 0; font-weight: 700; }
.hrb-map-popup__fact a { color: var(--hrb-blue); }
.hrb-map-popup__flag-note { padding: .5rem .6rem; color: #34485f; background: #f4f7fa; border-radius: .35rem; font-size: .78rem; line-height: 1.4; }
.hrb-live-status-map .leaflet-tooltip { max-width: 260px; white-space: normal; color: var(--hrb-ink); border: 0; box-shadow: 0 5px 16px rgba(18,36,58,.2); }
.hrb-live-status-map .leaflet-tooltip strong,
.hrb-live-status-map .leaflet-tooltip span { display: block; }
.hrb-live-status-map .leaflet-tooltip span { margin-top: .15rem; color: var(--hrb-muted); font-size: .72rem; }

@media (max-width: 850px) {
  .hrb-live-status-grid { grid-template-columns: 1fr; }
  .hrb-live-tide { grid-template-columns: repeat(3, 1fr); }
  .hrb-live-tide__title { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .hrb-live-weather { grid-template-columns: auto minmax(0, 1fr); }
  .hrb-live-weather__wind { grid-column: 1 / -1; padding: .65rem 0 0; border-top: 1px solid #c7d9e7; border-left: 0; }
  .hrb-live-tide { grid-template-columns: 1fr 1fr; }
  .hrb-live-tide__item:nth-child(2) { grid-column: 1 / -1; }
  .hrb-live-status-map { height: 245px; }
}