/* post.css — the POST card skin. a paste-up / drafting-table feel: a tinted pasteboard with the
   document floating on it, a real toolbar, and the brand swatches. crisp CSS/SVG (no raster) so it
   scales + themes; swap in a miraigen-made PNG bar later if you want the textured look. */

.card.p-post .post-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: linear-gradient(180deg, #2a2540, #211d33);
  border-bottom: 1px solid rgba(124, 77, 255, 0.35);
}
.card.p-post .post-tb-gap { flex: 1; }

.post-tool {
  min-width: 30px; height: 28px; padding: 0 9px;
  border: 1px solid rgba(179, 136, 255, 0.35); border-radius: 7px;
  background: rgba(124, 77, 255, 0.12); color: #e8e3ff;
  font: 600 var(--fs-ui)/1 system-ui, sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, transform .06s;
}
.post-tool:hover { background: rgba(124, 77, 255, 0.28); }
.post-tool:active { transform: translateY(1px); }
.post-tool.post-del:hover { background: rgba(255, 90, 90, 0.30); border-color: rgba(255, 110, 110, 0.6); }
.post-tool.post-exp { background: rgba(124, 77, 255, 0.20); letter-spacing: .04em; font-size: var(--fs-ui); }
.post-tool.post-gearbtn { font-size: 15px; }

/* the body: a pasteboard the document floats on */
.card.p-post .post-body { padding: 0; background: transparent; }
.post-stage {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18px 12px; min-height: 200px; height: 100%;
  background:
    radial-gradient(120% 120% at 50% 0%, #1b1830 0%, #14121f 70%),
    repeating-linear-gradient(45deg, rgba(124,77,255,.04) 0 12px, transparent 12px 24px);
  overflow: auto; outline: none;
}
.post-canvas { box-shadow: 0 8px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(179, 136, 255, .25); border-radius: 2px; }
.post-err { color: #ff9a9a; font: var(--fs-ui) system-ui; padding: 24px; text-align: center; }

/* the gear panel — document setup + brand kit (settings-OR-content; ✕ at the bottom) */
.post-gear-wrap { padding: 0; }
.post-gear { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; color: #e8e3ff; font: var(--fs-ui)/1.5 system-ui; }
.post-gear-row { display: flex; align-items: center; gap: 12px; }
.post-gear-row > label { width: 96px; color: #b0a8d8; font-size: var(--fs-ui); }
.post-sel, .post-color {
  background: #1c1830; color: #e8e3ff; border: 1px solid rgba(179,136,255,.35);
  border-radius: 7px; padding: 6px 9px; font: var(--fs-ui) system-ui;
}
.post-color { width: 44px; height: 32px; padding: 2px; cursor: pointer; }
.post-sw-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.post-sw { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }
.post-sw:hover { transform: scale(1.12); }
.post-gear-note { color: #9a90c4; font-size: 13px; line-height: 1.5; border-left: 2px solid rgba(124,77,255,.5); padding-left: 10px; }
.post-gear-close {
  align-self: flex-start; margin-top: 4px;
  background: rgba(124,77,255,.18); color: #e8e3ff; border: 1px solid rgba(179,136,255,.4);
  border-radius: 7px; padding: 7px 14px; font: 600 var(--fs-ui) system-ui; cursor: pointer;
}
.post-gear-close:hover { background: rgba(124,77,255,.32); }