/* peerlabel.css — Rounded-rectangle peer labels with thick colored stroke + outer glow.
   REBUILT: no flip / 3D transforms. Single-click → modal. */

.peers-hd { gap: 12px; flex-wrap: wrap; }
.peers-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.peers-controls .input  { min-width: 220px; }
.peers-controls .select { min-width: 180px; }

.peer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 6px 2px;
}

/* =========================================================================
   Peer label card — rounded rectangle, no 3D transform, no flip
   ========================================================================= */
.peer {
  cursor: pointer;
  transition: transform 0.20s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.peer:hover {
  transform: translateY(-3px);
}
.peer:active {
  transform: translateY(-1px) scale(0.985);
}

/* ---- The single visible face (rounded rectangle) ---- */
.peer__face {
  position: relative;
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--card);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 102px;
  overflow: hidden;

  /* Default border & shadow — overridden per status below */
  border: 4px solid transparent;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

/* =========================================================================
   Status-colored thick stroke + outer glow
   ========================================================================= */
:root {
  --st-past:     #1d6fff;   /* solid blue  */
  --st-upcoming: #00b894;   /* green       */
  --st-tba:      #9aa1b3;   /* gray        */
}

/* Past (recorded, already happened) — blue */
.peer__face--st-past {
  border-color: var(--st-past);
  box-shadow:
    0 4px 18px rgba(29, 111, 255, 0.42),
    0 0 10px rgba(29, 111, 255, 0.22);
}
.peer:hover .peer__face--st-past {
  box-shadow:
    0 8px 28px rgba(29, 111, 255, 0.55),
    0 0 16px rgba(29, 111, 255, 0.32);
}

/* Upcoming (recorded, not yet happened) — green */
.peer__face--st-upcoming {
  border-color: var(--st-upcoming);
  box-shadow:
    0 4px 18px rgba(0, 184, 148, 0.42),
    0 0 10px rgba(0, 184, 148, 0.22);
}
.peer:hover .peer__face--st-upcoming {
  box-shadow:
    0 8px 28px rgba(0, 184, 148, 0.55),
    0 0 16px rgba(0, 184, 148, 0.32);
}

/* TBA (will report, no record yet) — gray */
.peer__face--st-tba {
  border-color: var(--st-tba);
  box-shadow:
    0 4px 16px rgba(154, 161, 179, 0.32),
    0 0 8px rgba(154, 161, 179, 0.14);
}
.peer:hover .peer__face--st-tba {
  box-shadow:
    0 8px 24px rgba(154, 161, 179, 0.45),
    0 0 14px rgba(154, 161, 179, 0.22);
}

/* -------------------------------------------------------------------
   Text layout inside the face
   ------------------------------------------------------------------- */
.peer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
}
.peer__name {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.peer__zh {
  font-weight: 800; font-size: 15px; line-height: 1.15;
  color: var(--ink);
}
.peer__tk {
  font-weight: 500; font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.3px;
}

.peer__badge {
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(154,161,179,0.12);
  border: 1px solid rgba(154,161,179,0.35);
  letter-spacing: 0.4px;
  color: var(--st-tba);
  flex: none;
}

.peer__bot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.peer__when {
  font-size: 11.5px; color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.peer__sectors { display: inline-flex; gap: 4px; flex: none; }
.peer__sectors .dot { width: 10px; height: 10px; }

/* =========================================================================
   Status legend + timezone picker (above the peer grid)
   ========================================================================= */
.sector-legend { align-items: center; justify-content: space-between; }
.legend-status { display: inline-flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.legend-item   { display: inline-flex; align-items: center; gap: 6px; }
.status-swatch {
  width: 14px; height: 14px; border-radius: 4px;
  display: inline-block; background: var(--card);
  border: 3px solid transparent; flex: none;
}
.status-swatch--past     { border-color: var(--st-past);     box-shadow: 0 0 4px rgba(29,111,255,0.45); }
.status-swatch--upcoming { border-color: var(--st-upcoming); box-shadow: 0 0 4px rgba(0,184,148,0.45); }
.status-swatch--tba      { border-color: var(--st-tba);      box-shadow: 0 0 4px rgba(154,161,179,0.40); }

.legend-tz {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-2);
}
.select--sm { min-width: 150px; padding: 6px 10px; font-size: 12.5px; }

/* =========================================================================
   Click hint — subtle ripple indicator on the card
   ========================================================================= */
.peer__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle at var(--click-x, 50%) var(--click-y, 50%),
    rgba(10,132,255,0.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

@media (max-width: 760px) {
  .sector-legend { flex-direction: column; align-items: flex-start; gap: 10px; }
  .peer__face { min-height: 90px; padding: 12px 14px; border-radius: 14px; }
  .peer__face::after { border-radius: 14px; }
}