/* Relationship picker: a copy of 1 homepage Customize row (what you pick + the
   die picker button from css/site.css), under the characters and above Generate,
   as wide as 1 Character column so the die sits next to its label. */
.relationship-picker-row {max-width:calc((100% - 32px) / 2); padding-top:14px; border-top:1px solid var(--border); margin-bottom:16px;}
.relationship-picker-label {font-size:16px; font-weight:600; color:var(--text-2);}
.relationship-picker-row .section-picker-btn {max-width:100%; overflow-wrap:anywhere; text-align:left;}
.relationship-controls {display:grid; gap:15px;}
.relationship-name-fields {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 32px;}
.relationship-field {min-width:0; display:grid; align-content:start; gap:12px;}
.relationship-field .quick-gender {min-width:0; width:100%;}
.relationship-field .quick-name {min-width:0;}
/* Character 1/2 head their group like the homepage result's group names
   (.spectrum-group-name) with the .psych-lbl rule under it, so the heading
   reads as a group and Gender as a field inside it. */
.relationship-character-heading {display:block; margin:0 0 4px; padding-bottom:8px; border-bottom:1px solid var(--border); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--accent);}
.relationship-saved-choice {min-width:0; display:grid; gap:7px;}
.relationship-saved-choice[hidden] {display:none;}
/* Same look as the Gender and Character name labels (.quick-name > label). */
.relationship-saved-choice label {font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3);}
.relationship-saved-choice select {min-width:0; width:100%;}
.relationship-swap {justify-self:center; width:auto;}
[data-relationship-other][hidden] {display:none;}
#relationshipStatus:empty {display:none;}
#relationshipStatus {margin:12px 0; color:var(--text-3);}
.relationship-saved {margin-bottom:26px;}
.relationship-saved:empty {display:none;}
.relationship-saved-rows {margin-top:12px;}
.relationship-saved-entry {display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); align-items:center;}
.relationship-saved-entry .quick-name-btn {width:auto;}
.relationship-saved-copy {display:grid; gap:4px; min-width:0; overflow-wrap:anywhere;}
@media(max-width:620px) {
  /* The phone Generate button brings its own top gap. */
  .relationship-picker-row {max-width:none; margin-bottom:0;}
  .relationship-name-fields {grid-template-columns:minmax(0,1fr); gap:26px;}
  .relationship-saved-entry {align-items:flex-start;}
}

/* Restore the homepage's phone line break: the name gets its own row,
   followed by Save and Export side by side. Generic standalone toolbars
   suppress this row because they have only Export. */
@media(max-width:580px) {
  .generator-result-sheet .doc-bar.result-actions::after {content:''; order:2; flex-basis:100%;}
  .generator-result-sheet .doc-bar.result-actions .doc-name-group {flex:1 1 100%;}
}
/* Generate scrolls the result into view; stop short of the fixed phone menu
   button (53px tall) so it doesn't cover the names. */
.generator-result-sheet {scroll-margin-top:64px;}