/* post.css — minimal page-specific tweaks */

.post-main .panel { padding: 18px; }
.post-main .section-title { margin: 18px 0 10px; }

.vx-cell.block{
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 14px;
}

.post-row{ align-items:center; }
.post-buttons{ justify-content:flex-end; margin-top: 10px; }
.status{ margin-top: 12px; }
.muted{ color: var(--muted); font-size: 13px; }

.post-actions{ align-items:center; justify-content:space-between; margin-top: 10px; }
.status-inline{ margin-top: 0; white-space: nowrap; }
.mode-row{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 10px; }
.bottom-actions{ margin-top: 18px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }


/* Secondary/soft buttons on white panels */
.btn.soft{background: var(--tile); border-color: var(--line); color: var(--ink);}
.btn.soft:hover{filter: brightness(1.03);}

/* Mobile: stack form rows regardless of theme (fix min-width on .col) */
@media (max-width: 640px){
  .post-main .row{ flex-direction: column; align-items: stretch; }
  .post-main .row > .col{ width: 100%; min-width: 0; flex: 1 1 auto; }
  .post-actions{ flex-direction: column; align-items: stretch; gap: 10px; }
  .post-actions .status-inline{ white-space: normal; }
  .mode-row{ flex-direction: column; align-items: flex-start; }
}


/* stoplist.html SMTP table-like layout */
.smtp-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:end;
}
.smtp-span2{ grid-column: 1 / -1; }
.smtp-status{
  text-align:right;
  font-weight:600;
  color: var(--ok, #21c45a);
  padding: 10px 0;
}
.smtp-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.addr-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 720px){
  .smtp-grid{ grid-template-columns: 1fr; }
  .smtp-span2{ grid-column: auto; }
  .smtp-status{ text-align:left; padding: 6px 0; }
  .addr-grid{ grid-template-columns: 1fr; }
}


/* === mobile safety: prevent horizontal overflow on post page === */
.post-page{ overflow-x:hidden; }
.post-page .app-shell,
.post-page .app-main,
.post-page .wrap.post,
.post-page .panel{ max-width:100%; }

.post-page .wrap.post{ width:100%; box-sizing:border-box; }
.post-page .wrap.post > *{ min-width:0; }

@media (max-width: 920px){
  .post-page .app-main > div[style*="max-width"]{ max-width:100% !important; }
}