/* Extras on every busking city page: "make a sign" and "report a rule change".
   Written into the pages by blog-src/busking.py; hand-edited. */
.cx { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 40px 0 8px; align-items: start; }
.cx-card { background: var(--surface-tint, #f3faf6); border: 1px solid var(--line, #e4e7ec); border-radius: 20px; padding: 22px 22px 20px; }
.cx-card h2 { font-size: 1.18rem !important; line-height: 1.3; margin: 0 0 6px !important; letter-spacing: -.01em; }
.cx-card > p { color: var(--muted, #667085); font-size: .95rem; line-height: 1.5; margin: 0 0 14px; }
.cx-btn { display: inline-block; background: var(--orange, #ff6b0a); color: #fff !important; font-weight: 750; padding: 11px 18px;
  border-radius: 12px; text-decoration: none !important; }
.cx-form { display: grid; gap: 10px; }
.cx-form label { display: grid; gap: 4px; font-size: .85rem; font-weight: 650; }
.cx-form label span { color: var(--muted, #667085); font-weight: 500; }
.cx-form textarea, .cx-form input { font: inherit; font-size: .95rem; padding: 10px 12px; border: 1.5px solid var(--line, #e4e7ec);
  border-radius: 10px; background: var(--surface, #fff); color: var(--text, #101828); }
.cx-form textarea { min-height: 84px; resize: vertical; }
.cx-form button { justify-self: start; border: 0; background: #101828; color: #fff; font: inherit; font-weight: 700; padding: 10px 16px;
  border-radius: 11px; cursor: pointer; }
html[data-theme="dark"] .cx-form button { background: #fff; color: #101828; }
.cx-form button[disabled] { opacity: .6; cursor: default; }
.cx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.cx-note { margin: 2px 0 0; font-weight: 650; font-size: .9rem; }
.cx-note.ok { color: var(--green-dark, #0b7a37); } .cx-note.bad { color: #d92d20; }
@media (max-width: 760px) { .cx { grid-template-columns: 1fr; } }