/* The Tonight board, the rules card (Track 5, 2026-09-30; static/tonight.js). Same palette, chips and sheets as the rest. */

/* The pill in Nearby's controls row: the status chip's look, so the row reads as one set of controls. Nothing in the
   row squeezes (a squeezed status chip read as a bare dot); when it is full the pill drops its word (tonight.js). */
.discovery-filters .intent-chip {
  flex-shrink:0
}
.discovery-filters .tonight-pill,.nearby-pills .tonight-pill {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:44px;
  min-width:44px;
  justify-content:center;
  padding:0 10px;
  border-radius:22px;
  border:1px solid #2c4252;
  background:#0f2130cc;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  backdrop-filter:blur(6px)
}
/* Compact: a 44 px circle, the number riding its top right, and the row's gaps a little tighter. */
.discovery-filters:has(.tonight-pill.compact) {
  gap:10px
}
.discovery-filters .tonight-pill.compact,.nearby-pills .tonight-pill.compact {
  position:relative;
  width:44px;
  padding:0
}
.tonight-pill.compact span {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0)
}
.tonight-pill.compact b {
  position:absolute;
  top:-3px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  font-size:11px;
  line-height:18px
}
.tonight-pill svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linejoin:round
}
.tonight-pill.has-posts {
  color:var(--ink);
  border-color:#39dfff66;
  background:#12303dcc
}
.tonight-pill.has-posts svg {
  color:var(--cyan)
}
.tonight-pill b {
  min-width:18px;
  height:20px;
  padding:0 5px;
  border-radius:10px;
  background:var(--cyan);
  color:#06202b;
  font-size:12px;
  line-height:20px;
  text-align:center
}

/* The board sheet */
.tonight-board .tonight-lead {
  margin:-4px 0 14px;
  text-align:left
}
.tonight-compose-open {
  width:100%;
  margin:0 0 6px
}
.tonight-mine {
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #39dfff55;
  background:#12303d99
}
.tonight-mine small {
  color:var(--muted);
  font-size:12px
}
.tonight-mine .tonight-text {
  margin:6px 0 4px
}
.tonight-list {
  display:flex;
  flex-direction:column;
  margin-top:6px
}
.tonight-card {
  display:flex;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line)
}
.tonight-card:last-child {
  border-bottom:0
}
.tonight-who {
  flex:none;
  align-self:flex-start;
  min-width:44px;
  min-height:44px;
  padding:0;
  border-radius:50%
}
.tonight-who .avatar {
  width:48px;
  height:48px
}
.tonight-body {
  position:relative;
  flex:1;
  min-width:0
}
.tonight-line {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px
}
.tonight-line strong {
  font-size:15px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%
}
.tonight-age {
  color:var(--muted);
  font-size:13px
}
.tonight-intent {
  padding:1px 8px;
  border-radius:12px;
  background:#12303dee;
  border:1px solid #39dfff55;
  color:#d7f4ff;
  font-size:11px;
  font-weight:600
}
.tonight-meta {
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:12px
}
.tonight-text {
  margin:7px 0 2px;
  font-size:15px;
  line-height:1.45;
  overflow-wrap:anywhere
}
.tonight-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 -4px -6px 0
}
.tonight-actions .text-button {
  min-height:44px;
  padding-left:0
}
.tonight-more {
  min-width:44px;
  min-height:44px;
  font-size:20px;
  color:var(--muted)
}
.tonight-menu {
  position:absolute;
  right:0;
  bottom:44px;
  z-index:3;
  min-width:170px;
  padding:6px;
  border-radius:14px;
  background:#0f1c27;
  border:1px solid #33475a;
  box-shadow:0 14px 34px #00000080
}
.tonight-menu button {
  display:block;
  width:100%;
  min-height:44px;
  padding:0 12px;
  border-radius:9px;
  text-align:left;
  font-size:15px;
  color:var(--ink)
}
.tonight-menu button:hover,
.tonight-menu button:focus-visible {
  background:#1b2c3a
}
.tonight-empty .invite-inline {
  margin:auto
}

/* Compose */
.tonight-compose textarea {
  width:100%;
  min-height:92px;
  resize:vertical;
  font:inherit;
  font-size:16px
}
.tonight-counter {
  display:block;
  margin-top:4px;
  text-align:right;
  color:var(--muted);
  font-size:12px
}
.tonight-hours {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:12px 0 4px
}
.tonight-hours span {
  flex-basis:100%;
  color:var(--muted);
  font-size:13px
}
.tonight-hours button {
  min-width:56px;
  min-height:44px;
  padding:0 14px;
  border-radius:22px;
  border:1px solid #2c4252;
  background:#0f2130;
  color:var(--muted);
  font-weight:600
}
.tonight-hours button.active {
  color:#06202b;
  background:var(--ice);
  border-color:var(--ice)
}
.tonight-compose .primary {
  width:100%;
  margin-top:6px
}
.tonight-compose .text-button {
  display:block;
  margin:8px auto 0;
  min-height:44px
}

/* The rules card */
.rules-card ul {
  margin:4px 0 20px;
  padding:0;
  list-style:none
}
.rules-card li {
  position:relative;
  padding:10px 0 10px 26px;
  border-bottom:1px solid var(--line);
  font-size:16px;
  line-height:1.4
}
.rules-card li:last-child {
  border-bottom:0
}
.rules-card li::before {
  content:'';
  position:absolute;
  left:4px;
  top:17px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px #39dfffaa
}
.rules-card .primary {
  width:100%
}

/* Show on radar: a ring that follows his bubble for a few seconds. */
.tonight-ring {
  position:fixed;
  z-index:30;
  pointer-events:none;
  border-radius:50%;
  border:3px solid var(--cyan);
  box-shadow:0 0 18px #39dfffcc,inset 0 0 12px #39dfff66;
  transform:translate(-50%,-50%);
  animation:tonight-ring 1.1s ease-out infinite
}
@keyframes tonight-ring {
  0% { opacity:1; transform:translate(-50%,-50%) scale(.92) }
  70% { opacity:.35; transform:translate(-50%,-50%) scale(1.25) }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.35) }
}
@media (prefers-reduced-motion: reduce) {
  .tonight-ring { animation:none }
}