/* CITY PIXELS STEP 150A PIXEL PINGS PAGE - 2026-07-22 */

.pixel-pings-main{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:40px 0 70px;
}

.pixel-pings-loading,
.pixel-pings-signed-out{
  display:flex;
  gap:18px;
  align-items:center;
  padding:28px;
}

.pixel-pings-shell{
  display:grid;
  gap:22px;
}

.pixel-pings-shell[hidden],
.pixel-pings-signed-out[hidden],
.pixel-pings-loading[hidden]{
  display:none!important;
}

.pixel-pings-hero{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  padding:clamp(24px,4vw,42px);
}

.pixel-pings-hero h1{
  margin:9px 0 10px;
  font-size:clamp(35px,6vw,66px);
  line-height:.98;
}

.pixel-pings-hero-count{
  display:grid;
  place-items:center;
  min-width:145px;
  min-height:145px;
  padding:18px;
  border:1px solid rgba(88,231,255,.42);
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(69,210,255,.23),
      rgba(43,20,83,.58)
    );
  box-shadow:
    0 0 34px rgba(78,214,255,.15);
}

.pixel-pings-hero-count strong{
  color:#8ff3ff;
  font-size:44px;
  line-height:1;
}

.pixel-pings-hero-count span{
  color:var(--muted);
  font-weight:900;
}

.pixel-pings-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);
  gap:20px;
  align-items:start;
}

.pixel-pings-inbox,
.pixel-pings-preferences{
  padding:clamp(20px,3vw,30px);
}

.pixel-pings-section-heading{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}

.pixel-pings-section-heading h2,
.pixel-pings-preferences h2{
  margin:8px 0 0;
  font-size:clamp(25px,3vw,36px);
}

.pixel-pings-message{
  margin-top:16px;
}

.pixel-pings-list{
  display:grid;
  gap:12px;
  margin-top:18px;
}

.pixel-pings-list[hidden]{
  display:none!important;
}

.pixel-pings-empty{
  display:grid;
  gap:6px;
  margin-top:18px;
  padding:18px;
  border:1px dashed rgba(88,231,255,.3);
  border-radius:16px;
  background:rgba(13,38,66,.38);
  color:var(--muted);
}

.pixel-pings-empty strong{
  color:#fff;
}

.pixel-pings-empty[hidden]{
  display:none!important;
}

.pixel-ping-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:rgba(18,22,52,.72);
}

.pixel-ping-card.is-unread{
  border-color:rgba(88,231,255,.42);
  background:
    linear-gradient(
      135deg,
      rgba(16,56,80,.86),
      rgba(51,22,81,.82)
    );
}

.pixel-ping-unread-marker{
  width:9px;
  height:9px;
  border-radius:50%;
  background:transparent;
}

.pixel-ping-card.is-unread .pixel-ping-unread-marker{
  background:#79efff;
  box-shadow:
    0 0 12px rgba(121,239,255,.82);
}

.pixel-ping-copy{
  min-width:0;
}

.pixel-ping-topline{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.pixel-ping-label{
  color:#8ff3ff;
  font-family:"Press Start 2P",monospace;
  font-size:7px;
}

.pixel-ping-topline time{
  color:var(--muted);
  font-size:12px;
}

.pixel-ping-copy h3{
  margin:8px 0 6px;
  color:#fff;
  font-size:19px;
}

.pixel-ping-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.pixel-ping-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.pixel-pings-preferences{
  position:sticky;
  top:92px;
}

.pixel-pings-preferences > p{
  color:var(--muted);
  line-height:1.55;
}

.pixel-pings-preferences form{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.pixel-pings-toggle{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:rgba(18,24,54,.65);
  cursor:pointer;
}

.pixel-pings-toggle input{
  width:20px;
  height:20px;
  margin-top:2px;
}

.pixel-pings-toggle span{
  display:grid;
  gap:4px;
}

.pixel-pings-toggle strong{
  color:#fff;
}

.pixel-pings-toggle small{
  color:var(--muted);
  line-height:1.45;
}

.pixel-pings-email-state{
  display:grid;
  gap:5px;
  padding:14px;
  border:1px solid rgba(255,199,91,.25);
  border-radius:14px;
  background:rgba(72,47,12,.38);
}

.pixel-pings-email-state strong{
  color:#ffe09a;
}

.pixel-pings-email-state span{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

@media (max-width:900px){
  .pixel-pings-layout{
    grid-template-columns:1fr;
  }

  .pixel-pings-preferences{
    position:static;
  }
}

@media (max-width:700px){
  .pixel-pings-hero,
  .pixel-pings-section-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .pixel-pings-hero-count{
    min-width:110px;
    min-height:110px;
  }

  .pixel-ping-card{
    grid-template-columns:1fr;
  }

  .pixel-ping-unread-marker{
    position:absolute;
  }

  .pixel-ping-topline{
    align-items:flex-start;
    flex-direction:column;
  }

  .pixel-ping-actions{
    justify-content:flex-start;
  }
}