/* TWINS v0.2.98 — private relationship calendar: 会う / 食事 / SEX */

/* One clear privacy explanation for the three calendar buttons. */
.relation-private-record-note{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:0 14px 9px;
  padding:8px 9px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:9px;
  background:rgba(255,255,255,.022);
}
.relation-private-record-note>span{
  flex:0 0 auto;
  margin-top:1px;
  font-size:11px;
  opacity:.72;
}
.relation-private-record-note p{margin:0;min-width:0}
.relation-private-record-note strong{
  display:block;
  color:#bdb5c1;
  font-size:9px;
  line-height:1.35;
}
.relation-private-record-note small{
  display:block;
  margin-top:2px;
  color:#756e79;
  font-size:7.5px;
  line-height:1.5;
}

/* Profile/photo row + own ♥ action on the far right. */
.relation-card-v098{padding-bottom:7px}
.relation-person-row-v098{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  align-items:center;
  gap:2px;
}
.relation-card-v098 .relation-person-main-v080{
  min-width:0;
  padding-right:4px;
}
.relation-heart-side-form{
  margin:0;
  align-self:center;
  justify-self:center;
}
.relation-heart-side{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:#17131a;
  color:#68616d;
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.relation-heart-side.is-on{
  border-color:rgba(236,66,172,.34);
  background:rgba(236,66,172,.10);
  color:#f067bf;
}
.relation-heart-side:disabled{opacity:.55}

/* Private event buttons: exactly three equal choices. */
.relation-event-buttons-v098{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  padding:0 9px 3px;
}
.relation-event-record-btn{
  position:relative;
  min-height:41px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 7px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:9px;
  background:#151219;
  color:#a29aa6;
  font:inherit;
  font-size:9px;
  font-weight:850;
  cursor:pointer;
}
.relation-event-record-btn small{
  min-width:15px;
  height:15px;
  display:grid;
  place-items:center;
  padding:0 3px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#a69daa;
  font-size:6.5px;
  line-height:1;
}
.relation-event-record-btn.is-meet{border-color:rgba(142,105,238,.16)}
.relation-event-record-btn.is-meal{border-color:rgba(214,162,86,.14)}
.relation-event-record-btn.is-sex{border-color:rgba(237,70,174,.18)}
.relation-event-record-btn:active{background:#1b161e}
.relation-end-form-v098{
  width:auto!important;
  margin:1px 9px 0 auto!important;
}
.relation-end-form-v098 button{
  width:auto!important;
  padding:4px 2px!important;
}

/* Generic event record sheet. */
body.relation-event-open{overflow:hidden}
.relation-event-sheet{
  position:fixed;
  inset:0;
  z-index:2650;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.relation-event-sheet[hidden]{display:none!important}
.relation-event-backdrop{
  position:absolute;
  inset:0;
  border:0;
  margin:0;
  padding:0;
  background:rgba(0,0,0,.58);
  opacity:0;
  transition:opacity .18s ease;
}
.relation-event-panel{
  position:relative;
  z-index:1;
  width:min(620px,100%);
  padding:8px 14px calc(14px + env(safe-area-inset-bottom));
  background:#141116;
  border-top:1px solid rgba(255,255,255,.08);
  border-radius:14px 14px 0 0;
  transform:translateY(102%);
  transition:transform .2s ease;
}
.relation-event-sheet.is-open .relation-event-backdrop{opacity:1}
.relation-event-sheet.is-open .relation-event-panel{transform:translateY(0)}
.relation-event-handle{
  width:34px;
  height:3px;
  margin:0 auto 10px;
  border-radius:99px;
  background:rgba(255,255,255,.18);
}
.relation-event-panel>small{display:block;color:#8a828f;font-size:8px}
.relation-event-panel>strong{display:block;margin-top:3px;font-size:15px}
.relation-event-private-note{
  margin:7px 0 0;
  color:#756e79;
  font-size:8px;
  line-height:1.55;
}
.relation-event-panel form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px;
  gap:7px;
  align-items:end;
  margin-top:11px;
}
.relation-event-panel label{display:grid;gap:4px;color:#817986;font-size:8px}
.relation-event-panel input[type="date"]{
  height:40px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.07);
  background:#0b090d;
  color:#eee8f0;
}
.relation-event-panel form button{
  height:40px;
  border:0;
  border-radius:8px;
  background:#ef3fb3;
  color:#fff;
  font-size:10px;
  font-weight:850;
}
.relation-event-panel>a,
.relation-event-close{
  width:100%;
  min-height:37px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:5px;
  border:0;
  background:transparent;
  color:#99919e;
  text-decoration:none;
  font-size:9px;
}
.relation-event-close{cursor:pointer}

/* Calendar shows both who and what happened. */
.relation-calendar-event-avatar{
  position:relative;
}
.relation-calendar-event-avatar i{
  position:absolute;
  right:-2px;
  bottom:-2px;
  min-width:12px;
  height:10px;
  display:grid;
  place-items:center;
  padding:0 2px;
  border:1px solid #151019;
  border-radius:4px;
  background:#28222c;
  color:#d7d0da;
  font-size:5px;
  line-height:1;
  font-style:normal;
  font-weight:900;
}
.relation-calendar-event-avatar.is-meet i{background:#282039;color:#c7b3ff}
.relation-calendar-event-avatar.is-meal i{background:#30271d;color:#e4c28d}
.relation-calendar-event-avatar.is-sex i{background:#351b2d;color:#f5a3d6}
.relation-month-events-list small{
  display:flex!important;
  align-items:center;
  gap:5px;
}
.relation-event-type-chip{
  display:inline-flex;
  align-items:center;
  min-height:15px;
  padding:1px 5px;
  border-radius:5px;
  background:#252029;
  color:#bcb3bf;
  font-size:6px;
  font-weight:900;
}
.relation-event-type-chip.is-meet{background:#282039;color:#c7b3ff}
.relation-event-type-chip.is-meal{background:#30271d;color:#e4c28d}
.relation-event-type-chip.is-sex{background:#351b2d;color:#f5a3d6}

@media(max-width:520px){
  .relation-card-v098{
    display:block!important;
    padding:0 0 7px!important;
  }
  .relation-person-row-v098{
    grid-template-columns:minmax(0,1fr) 44px;
  }
  .relation-card-v098 .relation-person-main-v080{
    grid-template-columns:64px minmax(0,1fr)!important;
    padding:8px 4px 8px 8px!important;
  }
  .relation-heart-side{width:38px;height:38px}
  .relation-event-buttons-v098{gap:5px;padding:0 8px 3px}
  .relation-event-record-btn{min-height:39px}
  .relation-event-panel form{grid-template-columns:1fr}
}