/* Schema patch 39.06: /connect, the Global Social Directory (includes/views/connect.php), after site.css and pages.css.
   Regions sit in a card grid (one column at phone width, two from 720 px, three from 1100 px; cards keep their own height,
   so the grid reads like a masonry while keeping the desk's sort order left to right); each region is a sanctuary card
   (surface, amber hairline, soft shadow), and each account a 60 px row
   with the platform's own mark (YouTube red, Instagram gradient, Facebook blue; X black, ivory in Temple Dark). */

.cx-hero { padding-bottom: clamp(20px, 3vw, 36px) !important; }
.cx-hero__title { max-width: 16ch; }
.cx-hero__lead { max-width: 44rem; }
.pg > .cx-body { padding-block: clamp(8px, 2vw, 24px) clamp(56px, 7vw, 104px); }
.cx-note { margin: 0 0 20px; color: var(--muted); font-size: var(--fs-sm); max-width: 44rem; }

.cx-masonry { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); align-items: start; }
@media (min-width: 720px) { .cx-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cx-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cx-region {
  min-width: 0;
  padding: clamp(16px, 2vw, 22px); border-radius: var(--radius-card); border: 1px solid var(--card-border); background: var(--surface); box-shadow: var(--shadow-soft);
}
.cx-region__h { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); font-weight: 600; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.cx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 8px;
  border-radius: 14px; border: 1px solid var(--champagne); background: var(--sunken); color: var(--ink); text-decoration: none;
  transition: border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease), background-color var(--t-base) var(--ease);
}
.cx-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cx-card:hover { border-color: var(--champagne-strong); transform: translateY(-1px); background: var(--surface); } }
.cx-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(245, 158, 11, 0.06); }
.cx-card__text { display: grid; min-width: 0; }
.cx-card__platform { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.cx-card__handle { font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-card__go { color: var(--amber-ink); font-size: 1.1rem; }
.cx-icon { display: block; }
.cx-icon__x-bg { fill: #0F1419; }
.cx-icon__x-fg { fill: #FFFFFF; }
[data-theme="dark"] .cx-icon__x-bg { fill: #FCFBF7; }
[data-theme="dark"] .cx-icon__x-fg { fill: #0D0B09; }

.cx-empty { max-width: 44rem; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-card); border: 1px dashed var(--champagne-strong); background: var(--surface); }
.cx-empty__h { margin: 0 0 0.4em; font-family: var(--serif); font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); font-weight: 600; }
.cx-empty p { margin: 0 0 0.8em; color: var(--muted); line-height: 1.7; }
.cx-empty__acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0 !important; }
@media (max-width: 479.98px) { .cx-empty__acts .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cx-card { transition: none; } .cx-card:hover { transform: none; } }