.attention-light {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: #b8c4bf;
}

.attention-light.active,
[data-view].has-update::after {
  background: #ff7a35;
  box-shadow: 0 0 0 5px rgb(255 122 53 / 18%), 0 0 12px #ff7a35;
}

[data-view].has-update {
  position: relative;
}

[data-view].has-update::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.home-notifications > summary,
.progress-history-card > summary {
  cursor: pointer;
  list-style: none;
}

.home-notifications > summary::-webkit-details-marker,
.progress-history-card > summary::-webkit-details-marker {
  display: none;
}

.home-notifications > summary::after,
.progress-history-card > summary::after,
.hydration-history > summary::after {
  content: "▾";
  margin-left: auto;
}

.home-notifications[open] > summary::after,
.progress-history-card[open] > summary::after,
.hydration-history[open] > summary::after {
  content: "▴";
}

.notifications-enabled {
  border-color: #168957 !important;
  color: #126d49 !important;
}

.home-metric.needs-attention {
  border-color: #ff7a35;
  background: #fff8f3;
}

.measurement-due {
  color: #b33c2d;
  font-size: 18px;
}

#homeNextMeasure small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
}

.measurement-gate-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f2b2a8;
  background: #fff2ef;
  color: #812d22;
}

.measurement-gate-notice button {
  border: 0;
  background: transparent;
  color: #075f46;
  font-weight: 800;
  text-decoration: underline;
}

.measurement-blocked {
  box-shadow: 0 0 0 3px rgb(180 68 53 / 15%);
}

.hydration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.metric-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.metric-heading h3,
.metric-heading small {
  margin: 0;
}

.water-progress,
.caffeine-progress {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  margin: 18px 0;
  border: 1px solid #d4dfdb;
  background: #edf3f1;
}

.water-progress > div,
.caffeine-progress > div {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #2d91df;
  transition: width .25s ease;
}

.caffeine-progress > div {
  background: #ef9f20;
}

.water-progress strong,
.caffeine-progress strong {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 52px;
  place-items: center;
}

.caffeine-entry {
  display: grid;
  grid-template-columns: 1fr 100px auto;
  gap: 8px;
}

.hydration-history {
  margin-top: 14px;
}

.hydration-history > summary {
  display: flex;
  cursor: pointer;
}

.hydration-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.hydration-charts article {
  border: 1px solid #d9e1de;
  padding: 12px;
}

.mini-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  height: 150px;
  gap: 7px;
  margin-top: 14px;
}

.mini-bars span {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  height: 100%;
  text-align: center;
}

.mini-bars i {
  display: block;
  min-height: 2px;
  background: #2d91df;
}

.mini-bars.caffeine i {
  background: #ef9f20;
}

.mini-bars small {
  font-size: 10px;
}

.hydration-entry-list {
  display: grid;
  gap: 8px;
}

.hydration-entry-list article {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #e1e8e5;
}

.hydration-entry-list small {
  display: block;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 700px) {
  .hydration-grid,
  .hydration-charts {
    grid-template-columns: 1fr;
  }

  .caffeine-entry {
    grid-template-columns: 1fr;
  }

  .hydration-entry-list article {
    grid-template-columns: 1fr auto;
  }

  .hydration-entry-list .button-row {
    grid-column: 1 / -1;
  }
}