/* social.css – Social side panel and read-only mode for a friend's library */

#socp {
  position: fixed;
  top: var(--hh);
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  z-index: 15;
  background: var(--panel);
  border-left: 1px solid var(--edge);
  box-shadow: -12px 0 30px var(--cs);
  overflow-y: auto;
  padding: 18px 20px;
}
#socp[hidden] {
  display: none;
}
.soch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.soch h2 {
  font: 700 22px var(--serif);
}
body.socopen main {
  padding-right: calc(24px + 420px);
}
@media (max-width: 900px) {
  body.socopen main {
    padding-right: 24px;
  }
}
.vbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--panel);
}
.urow {
  align-items: center;
}
.urow .btn.pri {
  background: var(--acc);
  color: var(--accInk);
}
body.ro .dx,
body.ro #newbook,
body.ro #af,
body.ro .cx,
body.ro #sm,
body.ro #ed,
body.ro #add,
body.ro #selbar,
body.ro #m-exp,
body.ro #m-imp,
body.ro #del,
body.ro .lnk {
  display: none !important;
}
body.ro .tg,
body.ro .tog label {
  pointer-events: none;
}
body.ro .tog input:not(:checked) + * {
  opacity: 0.55;
}
.soc {
  max-width: none;
}
.psq {
  width: 100%;
  padding: 9px 14px;
  border-radius: 99px;
  border: 1px solid var(--edge);
  background: var(--bg);
  color: var(--ink);
  margin-bottom: 6px;
}
.sh {
  margin: 22px 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  font-weight: 600;
}
.prow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
}
body.ro .sw {
  display: none;
}

/* ---- iPhone safe areas: keep clear of the status bar, camera cut-out and home bar ---- */
#socp {
  top: calc(var(--hh) + env(safe-area-inset-top));
  padding-right: calc(20px + env(safe-area-inset-right));
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}