/* connections.css: the Connections page (your people, and "You & Sam"). */

.conn-intro { display: flex; flex-direction: column; gap: 12px; padding-top: 32px; }
#need-chart { padding-bottom: 48px; }

/* --- Your people + the form, side by side --- */
.people-layout { display: flex; flex-wrap: wrap; gap: 40px 64px; padding-block: 32px 24px; align-items: flex-start; }
.people-area { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.add-person { flex: 1 1 380px; max-width: 520px; padding-left: 64px; border-left: 1px solid var(--line); }

.people-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.people-list:empty { display: none; }
.person {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.person-main { flex: 1 1 260px; min-width: 0; }
.person-name { font-size: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; overflow-wrap: anywhere; }
.person-tag { font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); }
.person-signs { margin: 4px 0 0; font-size: 15px; color: var(--bone-soft); }
.person-actions { display: flex; align-items: center; gap: 20px; }
.person-confirm { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.person-confirm p { flex-basis: 100%; margin: 0; font-size: 15px; }

.people-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.people-empty p { margin: 0; max-width: 46ch; }

.permission { color: var(--bone); font-weight: 600; }
.form-footnote { font-size: 13px; margin: -10px 0 0; }

/* --- You & Sam --- */
.compare-intro { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.compare-intro-text { flex: 1 1 560px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lilac { color: var(--lilac); }

.wheel .aspect { stroke-opacity: 0.85; }

/* Side by side + the explanations */
.pair-explained { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.side-by-side { flex: 1 1 300px; max-width: 400px; display: flex; flex-direction: column; gap: 12px; }
.side-by-side th[scope="row"] { font: 600 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--bone); border-bottom: 1px solid var(--line); padding: 13px 16px 13px 0; text-align: left; }
.side-by-side td:last-child { color: var(--lilac); }
.links-area { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.links-summary { margin: 0; max-width: 70ch; color: var(--bone-soft); }

.links-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.link-card { padding: 18px 0 18px 18px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; outline: none; transition: border-color 0.2s, background 0.2s; }
.link-card:focus-visible, .link-card.lit, .link-card:hover { border-left-color: var(--champagne); background: rgba(233, 227, 216, 0.04); }
.link-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; font: 650 11.5px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-soft); }
.link-kind.easy::before, .link-kind.tense::before, .link-kind.blend::before {
  content: ''; display: inline-block; width: 18px; margin-right: 8px; vertical-align: middle;
}
.link-kind.easy::before  { border-top: 2px dashed var(--champagne); }
.link-kind.tense::before { border-top: 2px solid var(--bone); }
.link-kind.blend::before { width: 8px; height: 8px; border-radius: 50%; background: var(--champagne); box-shadow: 5px 0 0 var(--lilac); margin-right: 13px; }
.link-maybe { color: var(--error); }
.link-title { font-size: 22px; line-height: 1.25; }
.link-symbol { color: var(--champagne); font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', var(--serif); margin-right: 8px; }
.link-symbol.them { color: var(--lilac); margin: 0 0 0 8px; }
.link-and { font-style: italic; color: var(--bone-soft); }
.link-text { margin: 6px 0 0; max-width: 72ch; color: var(--bone-soft); }
/* The part that changes with Friendship / Romance, with a small label. */
.link-meaning { margin: 8px 0 0; max-width: 72ch; }
.lens-tag {
  display: inline-block; margin-right: 10px;
  font: 700 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne);
}

@media (max-width: 900px) {
  .add-person { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 32px; max-width: none; }
  .side-by-side { max-width: none; }
}

/* The two-person wheel: slightly bigger symbols (there are fewer of
   them), and always small enough to fit on the screen with the title. */
#pair-wheel { width: min(520px, calc(100vh - 370px), 100%); }
#pair-wheel .planets.you .planet-symbol { font-size: 22px; }
#pair-wheel .planets.them .planet-symbol { font-size: 19px; }

.side-by-side .symbol {
  display: inline-block; width: 24px; font-size: 17px; color: var(--champagne);
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', var(--serif);
}

/* Hovering the lines and signs on the two-person wheel */
.wheel-hint { margin: 0 0 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--champagne); }
.wheel .aspect-hit { stroke: transparent; stroke-width: 12; cursor: pointer; outline: none; }
.wheel .aspect-hit:focus-visible { stroke: rgba(205, 187, 146, 0.35); }

/* The second Friendship / Romance switch, right above the explanations */
.lens-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* After switching, the changed texts glow for a moment. */
@keyframes lens-flash { from { background: rgba(205, 187, 146, 0.18); } to { background: transparent; } }
.flash { animation: lens-flash 1.4s ease-out; }

/* A friend's share link */
.shared-view { padding-bottom: 48px; }
.share-back { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 8px; max-width: 420px; }
.share-back .field[hidden] { display: none; }
.share-back input[type="text"] { width: 100%; }
.share-join { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin: 8px 0 16px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 560px; }
.share-join[hidden] { display: none; }
.share-join p { margin: 0; }
.share-join #account-out, .share-join #account-in { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; }
.shared-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 8px; }

/* Share your chart */
.share-box { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.share-box p { margin: 0; max-width: 52ch; }
#share-form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
#share-form .field, .share-result { width: 100%; max-width: 520px; }
.share-row { display: flex; gap: 0; }
.share-row input { min-width: 0; font-size: 14px; color: var(--bone-soft); }
.share-row .button { flex: none; }
.share-result .hint { margin-top: 8px; }