/* waterrise on the start page: its planning pages' dark look, the one blue
   accent, Charter for what people read and Geist for the interface — and its
   "For you now" panel drawn the way app.css draws it: outlined uppercase
   badges, the item's id in Geist Mono, hairlines between items, and the
   counts along the bottom. */
.il-waterrise { --il: #7ea2ff; }
.il-waterrise .il-name { font-family: "Geist", sans-serif; font-weight: 650; letter-spacing: -0.01em; }
/* The glyph is a mask: waterrise's three rising bars in each place's accent. */
.il-waterrise .il-name::before, .band-waterrise .band-name::before {
  -webkit-mask: url("../marks/waterrise-glyph.svg") center / contain no-repeat; mask: url("../marks/waterrise-glyph.svg") center / contain no-repeat;
  margin-right: 0.45em;
}
.il-waterrise .il-name::before { background: #2f5bd3; }
@media (prefers-color-scheme: dark) { .il-waterrise .il-name::before { background: #7ea2ff; } }

.band-waterrise {
  --band-line: #262a33; --band-accent: #7ea2ff; --band-on-accent: #0b1020;
  background: #0f1115; color: #eceef2; font-family: "Geist", system-ui, sans-serif;
}
.band-waterrise .band-name { font-weight: 650; letter-spacing: -0.02em; }
.band-waterrise .band-name::before { background: #7ea2ff; transform: scale(0.82); }
.band-waterrise .band-pitch {
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
}
.band-waterrise .band-facts li { color: #9aa1ad; }
.band-waterrise .band-links a { border-radius: 999px; font-weight: 600; font-size: 0.875rem; }

.wr-app { max-width: 28rem; margin-left: auto; font-size: 0.875rem; line-height: 1.45; }
.wr-top { display: flex; align-items: center; gap: 0.75rem; padding: 0 0 0.875rem; }
.wr-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 650; font-size: 0.95rem; }
.wr-mark { display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; width: 20px; height: 20px; }
.wr-mark i { display: block; height: 2px; border-radius: 1px; background: #7ea2ff; }
.wr-mark i:nth-child(1) { width: 7px; } .wr-mark i:nth-child(2) { width: 13px; } .wr-mark i:nth-child(3) { width: 20px; }
.wr-crumb { color: #9aa1ad; }
.wr-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.6rem;
  border: 1px solid #262a33; border-radius: 999px; font-family: "Geist Mono", monospace; font-size: 0.6875rem; color: #9aa1ad;
}
.wr-live i { width: 7px; height: 7px; border-radius: 50%; background: #6cc596; box-shadow: 0 0 0 3px rgb(108 197 150 / 0.18); }
.wr-todo { border: 1px solid #7ea2ff; border-radius: 10px; background: #161920; padding: 0.875rem 1rem 0.5rem; }
.wr-todo-head {
  margin: 0 0 0.5rem; font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em;
}
.wr-item { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.55rem 0; border-top: 1px solid #262a33; }
.wr-what { display: flex; gap: 0.5rem; align-items: center; }
.wr-badge {
  font-size: 0.656rem; font-weight: 600; line-height: 1.6; letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap; border-radius: 999px; padding: 0 0.44rem; border: 1px solid currentColor;
}
.wr-badge.open { color: #7ea2ff; } .wr-badge.gate { color: #ff8a80; }
.wr-id { font-family: "Geist Mono", monospace; font-size: 0.75rem; color: #9aa1ad; }
.wr-opt { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.35rem 0.5rem; margin-top: 0.15rem; border-radius: 8px; }
.wr-opt.on { background: #232c44; }
.wr-radio { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 1.5px solid #9aa1ad; }
.wr-opt.on .wr-radio { border-color: #7ea2ff; box-shadow: inset 0 0 0 3px #232c44, inset 0 0 0 8px #7ea2ff; }
.wr-rec { color: #6cc596; font-weight: 600; font-size: 0.75rem; margin-left: 0.25rem; }
.wr-foot { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0 0; font-size: 0.75rem; color: #9aa1ad; }
.wr-button {
  margin-left: auto; padding: 0.3rem 0.8rem; border-radius: 999px; background: #7ea2ff; color: #0b1020;
  font-weight: 600; font-size: 0.75rem;
}
@media (prefers-reduced-motion: no-preference) {
  .wr-live i { animation: wr-pulse 2.4s ease-in-out infinite; }
  @keyframes wr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
}