/* SailmatesConnect connections: same red, white, blue palette; more personal, editorial dating cards. */
:root { --fx-small: .875rem; --fx-body: 1rem; --fx-title: 1.5rem; }
.fx-kicker { font-size: .75rem; font-weight: 800; letter-spacing: .09em; color: var(--color-primary); text-transform: uppercase; }
.fx-heading { margin-bottom: var(--space-5); }
.connection-shortcuts { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); margin: var(--space-5) 0; }
.connection-shortcuts button { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); text-align: left; }
.connection-shortcuts button > svg:first-child { color: var(--color-primary); width:24px; height:24px; flex-shrink:0; }
.connection-shortcuts button > svg:last-child { width:16px;height:16px;margin-left:auto;flex-shrink:0; }
.connection-shortcuts span { display:flex;flex-direction:column; }
.connection-shortcuts small { font-size:.75rem;color:var(--color-text-muted); }
.connection-shortcuts button:hover { border-color:var(--color-accent); }
.crew-preferences,.fx-editor { padding:var(--space-5); }
.crew-preferences h2,.crew-card h2,.invite-card h2,.dating-aside h2,.fx-editor h2 { font-size:var(--fx-title);font-family:var(--font-display);font-weight:800;line-height:1.15; }
.fx-chips { display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0; }
.crew-grid,.invite-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-5); }
.crew-card,.invite-card { padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3); }
.crew-card p { font-size:var(--fx-body);color:var(--color-text-muted); }
.crew-card .btn,.invite-card .btn { margin-top:auto; }
.crew-avatars { display:flex;padding-left:var(--space-1); }
.crew-avatars img { width:52px;height:52px;border-radius:50%;border:3px solid var(--color-surface);object-fit:cover;margin-left:-4px; }
.crew-reason { display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;color:var(--color-primary);font-weight:700;font-size:var(--fx-small); }
.crew-reason svg { width:16px;height:16px; }
.crew-reason span { width:100%; }
.fx-warning { background:var(--color-warning-highlight);color:var(--color-warning);padding:var(--space-3);border-radius:var(--radius-sm);font-size:var(--fx-small); }
.fx-demo { font-size:.75rem;color:var(--color-text-muted);margin:var(--space-4) 0; }
.invite-top { display:flex;justify-content:space-between;gap:var(--space-2);align-items:center;flex-wrap:wrap; }
.invite-host { display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap; }
.invite-host img { width:32px;height:32px;border-radius:50%; }
.fx-sheet .sub-title { margin-bottom:var(--space-4); }
.social-fields { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3); }
.fx-editor > p { margin-bottom:var(--space-4); }
.social-preview { border-top:1px solid var(--color-divider);padding-top:var(--space-4);margin-top:var(--space-4); }
.social-links { display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2); }
.social-links a { padding:var(--space-2) var(--space-3);border:1px solid var(--color-divider);border-radius:var(--radius-full);font-size:var(--fx-small);color:var(--color-primary);overflow-wrap:anywhere; }
.social-links a:hover { border-color:var(--color-primary); }
.dating-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3); }
.dating-heading .page-subtitle { margin-bottom:var(--space-2); }
.dating-tabs { overflow-x:auto; }
.dating-tabs .mode-tab { padding-inline:var(--space-3);font-size:var(--fx-small); }
.dating-layout { display:grid;grid-template-columns:minmax(0,580px) minmax(0,1fr);gap:var(--space-8);max-width:960px;margin:var(--space-5) auto;align-items:start; }
.dating-aside { padding:var(--space-5);position:sticky;top:100px;display:flex;flex-direction:column;gap:var(--space-4); }
.fx-rule { display:flex;gap:var(--space-2);font-size:var(--fx-small);font-weight:700;align-items:flex-start; }
.fx-rule svg { width:18px;height:18px;flex-shrink:0;color:var(--color-accent); }
.date-profile { display:flex;flex-direction:column;gap:var(--space-4); }
.date-name { display:flex;justify-content:space-between;align-items:center;gap:var(--space-3); }
.date-name h2 { font-size:2rem;font-family:var(--font-display);font-weight:800; }
.date-photo { height:440px;position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface-2); }
.date-photo > img { width:100%;height:100%;object-fit:cover; }
.date-photo > span { position:absolute;left:var(--space-4);bottom:var(--space-4);color:white;background:rgba(0,0,0,.55);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:.75rem; }
.date-heart { position:absolute;right:var(--space-4);bottom:var(--space-4);width:52px;height:52px;border-radius:50%;background:var(--color-surface);color:var(--color-accent);display:grid;place-items:center;border:1px solid var(--color-divider);box-shadow:var(--shadow-sm); }
.date-heart:hover { background:var(--color-accent);color:white; }
.date-heart svg { width:24px;height:24px; }
.date-basics { display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);font-size:var(--fx-small); }
.date-basics span+span { padding-top:var(--space-2);border-top:1px solid var(--color-divider); }
.date-prompt { position:relative;padding:var(--space-5) var(--space-5) var(--space-16); }
.date-question { font-size:var(--fx-small);font-weight:700;color:var(--color-text-muted); }
.date-prompt p { font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.25;margin-top:var(--space-3);overflow-wrap:anywhere; }
.date-footer { display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-4) 0; }
.incoming-like { display:flex;gap:var(--space-4);padding:var(--space-4);margin-bottom:var(--space-3);align-items:flex-start; }
.incoming-like > img { width:80px;height:100px;object-fit:cover;border-radius:var(--radius-md); }
.incoming-like h2 { font-size:var(--fx-title);font-weight:800; }
.incoming-like p { margin-bottom:var(--space-2); }
.my-date-photos { display:flex;gap:var(--space-2);flex-wrap:wrap; }
.my-date-photos > div { position:relative; }
.my-date-photos img { width:88px;height:116px;object-fit:cover;border-radius:var(--radius-md); }
.my-date-photos button { position:absolute;right:0;top:0;background:var(--color-surface);border-radius:50%;width:26px;height:26px;display:grid;place-items:center; }
.my-date-photos button svg { width:16px;height:16px; }
.date-preview-photo { width:100%;max-height:360px;object-fit:cover;border-radius:var(--radius-lg);margin:var(--space-3) 0; }
.fx-editor textarea { resize:vertical;min-height:100px; }
@media(max-width:900px) { .crew-grid,.invite-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .connection-shortcuts { grid-template-columns:1fr;gap:var(--space-2); } .dating-layout { grid-template-columns:minmax(0,580px);justify-content:center; } .dating-aside { position:static; } }
@media(max-width:560px) { .crew-grid,.invite-grid,.social-fields { grid-template-columns:1fr; } .dating-heading { flex-wrap:wrap; } .date-photo { height:360px; } .dating-tabs .mode-tab { min-width:110px; } .incoming-like { flex-direction:column; } .incoming-like > img { width:72px;height:72px; } .fx-editor { padding:var(--space-4); } .date-name h2 { font-size:1.75rem; } }
@media(max-width:560px) {
  .invitation-heading { flex-direction:column;align-items:stretch; }
  .invitation-heading .page-subtitle { margin-bottom:var(--space-2); }
  .invitation-heading > .btn { align-self:flex-start; }
  .dating-tabs { display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-lg);gap:var(--space-1); }
  .dating-tabs .mode-tab { min-width:0;white-space:normal; }
}
@media(prefers-reduced-motion:reduce) { .connection-shortcuts *, .date-heart { transition:none; } }