.area-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #e4e8e4;
  border-radius: 16px;
  padding: 5px;
  margin-bottom: 22px;
}
.area-toggle button {
  border: 0;
  background: transparent;
  min-height: 48px;
  border-radius: 12px;
  font-weight: 700;
}
.area-toggle button.active {
  background: var(--sea);
  color: #fff;
  box-shadow: 0 4px 10px #0d4f5526;
}
.collection-panel,
.harbor-panel {
  display: none;
}
.collection-panel.active,
.harbor-panel.active {
  display: block;
}
.collection-panel > h2 {
  font:
    700 22px "Fraunces",
    serif;
  margin: 0 0 13px;
}
.collection-list {
  display: grid;
  gap: 9px;
}
.collection-list article {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 12px 15px;
}
.collection-list article > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.collection-list article small {
  color: var(--muted);
}
.waste-date {
  width: 51px;
  height: 51px;
  border-radius: 13px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.waste-date b {
  font:
    700 21px/1 "Fraunces",
    serif;
}
.waste-date small {
  font-size: 9px !important;
  letter-spacing: 0.08em;
  color: var(--ink) !important;
}
.waste-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-left: auto;
}
.waste-dot.paper {
  background: #2c86bb;
}
.waste-dot.food {
  background: #59a83c;
}
.waste-dot.mixed {
  background: #252525;
}
.schedule-note {
  color: var(--muted);
  font-size: 13px;
  margin: 14px 2px 18px;
}
.reception-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  margin: 20px 0 12px;
}
.reception-card > div:first-child {
  display: inline-block;
}
.reception-card > .status {
  float: right;
}
.reception-card h2 {
  font:
    700 24px "Fraunces",
    serif;
  margin: 5px 0 15px;
}
.hours-list {
  clear: both;
  background: var(--paper);
  border-radius: 14px;
  padding: 4px 14px;
  margin: 12px 0 16px;
}
.hours-list > div {
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.hours-list > div:last-child {
  border-bottom: 0;
}
.compact-hours {
  margin-top: 10px;
}
.harbor-panel .catch-summary {
  margin-top: 0;
}
.catch-details {
  margin-top: 14px;
}
.catch-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 17px;
}
.catch-total strong {
  font-size: 20px;
}
.catch-details h2 {
  font:
    700 21px "Fraunces",
    serif;
  margin: 22px 2px 10px;
}
.species-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 5px 16px;
}
.species-list > div {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.species-list > div:last-child {
  border-bottom: 0;
}
.data-updated {
  color: var(--muted);
  font-size: 13px;
  margin: 12px 2px;
}
.status:not(.open):not(.closed) {
  background: #e7ece9;
  color: var(--muted);
}
.waste-countdown{margin:0 0 12px;padding:10px 13px;border-radius:12px;background:#e7f2ef;color:var(--sea);font-weight:700}
.waste-reminder{margin-left:auto;border:0;border-radius:12px;background:var(--sea);color:#fff;padding:9px 11px;font-weight:700}
.next-open{display:block;clear:both;color:var(--sea);padding-top:8px}
.oxi-day-list{display:grid;gap:0;margin-top:10px}
.oxi-day-list>div{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.oxi-day-list>div:last-child{border-bottom:0}
.oxi-day-list strong{font-size:19px}
.oxi-day-list small{color:var(--muted);font-size:11px;font-weight:500}