/* Shared clear space. Component flow owns gaps; the global margin reset does not. */
:root{
  --space-copy:16px;
  --space-action:20px;
  --space-group:28px;
  --space-card:24px;
}
body .next-move{
  display:grid;
  gap:var(--space-copy);
  padding:var(--space-group) var(--space-card);
  margin-block:var(--space-group);
}
body .next-move>h2,body .next-move>h3,body .next-move>p{margin:0}
body .next-move>h2,body .next-move>h3{line-height:1.2}
body .next-move>p{line-height:1.55}
body .next-move>.button{margin-top:4px;min-height:52px;padding:14px 20px;line-height:1.4}
body #nextMove>.field-help{margin-top:12px}
body .next-move-actions{gap:12px}
body .next-move-actions>.button{min-height:52px;padding:14px 20px;line-height:1.4}
body #saveApp>.text-button{justify-self:start;min-height:44px}
body #saveApp>#installHelp:empty{display:none}

/* Modal content keeps a safe inset even on the narrowest phones. */
body .partner-sheet,body .compact-sheet,body #dateDialog{padding:var(--space-card)!important}
body .partner-sheet-top{margin-bottom:24px}
body .partner-tabs{margin-block:24px}
body .partner-phase{padding:var(--space-card);margin-block:24px}
body .partner-phase>.hub-kicker{margin-bottom:12px}
body .partner-phase h3{margin:0 0 16px}
body .partner-phase .phase-date{margin:0 0 16px;line-height:1.55}
body .partner-phase .phase-action-label{margin:24px 0 12px}
body .partner-phase .phase-action{margin:0 0 24px}
body .phase-links{gap:12px}
body .partner-actions,body .partner-links{gap:12px;margin-block:24px}
body .partner-action-chips{gap:12px;margin-top:16px;margin-bottom:20px}
body .partner-done{padding-top:24px;margin-top:28px}
body .intimacy-choices{gap:12px;margin-block:24px}
body .intimacy-choices legend{margin-bottom:16px;line-height:1.5}
body .intimacy-history{margin-top:28px;padding-top:16px}
body .partner-sheet textarea{margin-bottom:20px}
body .partner-setup-actions{gap:12px;margin-top:16px}

/* Plans and feedback: paragraphs, controls and success messages never touch. */
body #chosenPlan ol{margin:20px 0 28px}
body #chosenPlan li{margin-block:16px;line-height:1.55}
body #chosenPlan h3{margin:28px 0 16px}
body #chosenInvite{padding:24px;margin:0 0 24px;line-height:1.55}
body #chosenStatus:not(:empty){margin-top:20px}
body #care .deck-actions{gap:12px;margin-top:24px}
body #deckStatus:not(:empty),body #openerStatus:not(:empty){margin-block:20px}
body #openers>a{display:inline-block;margin-top:16px;line-height:1.5}
body .compact-fold[open]>summary,body .compact-group>details[open]>summary{margin-bottom:16px}
body .compact-group .touch-options,body .compact-group .moods{gap:12px}
body .compact-group .field-help+button,body .compact-group p+form{margin-top:20px}
body .sheet-header{top:calc(-1 * var(--space-card));padding:12px 0 20px;margin-bottom:12px}

/* The date picker previously reduced its inset to four pixels at 320px. */
body #dateDialog .dialog-top{margin-bottom:20px}
body #dateDialog h2{margin:0 0 20px}
body #dateModeHint{margin-block:16px;line-height:1.55}
body #dateDialog .date-shortcuts{gap:12px;margin-block:20px}
body #selectedDateLabel{margin-block:20px}
body #saveDateButton{margin-top:24px}
body #calendar .calendar-card{margin-inline:0;padding:var(--space-card)}
body #calendar .calendar-explain{padding:var(--space-card);margin-top:28px}
body #calendar .calendar-explain>p{margin-top:16px}
body #calendar .calendar-explain>.text-button{margin-top:20px}
body #calendarToday{margin-top:24px}
body #calendar .calendar-layout+.button{margin-top:28px}
body #settings .compact-menu+#experienceSettings{margin-top:28px}
body #settings #experienceSettings{gap:16px}

/* Staggered illustrations stay in flow: neither card can cover the other's copy. */
body .story-cards{display:grid;gap:24px;height:auto;align-items:start}
body .story-card:first-child,body .story-card:last-child{
  position:relative;inset:auto;width:min(100%,330px);height:auto;min-height:0;
  padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,46%);
  gap:20px 12px;
}
body .story-card:last-child{justify-self:end}
body .story-card p{grid-column:1/-1;margin:0}
body .story-card .story-dot{grid-column:1;grid-row:2;margin:0}
body .story-card small,body .story-card:last-child small{
  grid-column:1;margin:0;max-width:none;padding:0;align-self:center;
  background:none;line-height:1.55;overflow-wrap:break-word;
}
body .story-card:first-child small{grid-row:3}
body .story-card .story-flower-art,body .story-card .story-chat-art{
  position:static;grid-column:2;grid-row:2/span 2;align-self:end;
  width:100%;height:180px;
}

/* Browsing stays on one surface, with a central copy action. */
body #care .deck-actions{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);
  gap:12px;
}
body #care .deck-actions button{padding:14px 8px;min-height:52px;line-height:1.35;min-width:0}
body #care #deckCopy{background:#8656ec;color:#fff}
body #care #deckSave{background:#eee8f7;color:#51445e}
body #care #openers .deck-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr)}
body #care #deckPlan{margin-top:24px;padding-top:12px;border:0;border-top:1px solid #ffffff30;width:100%}
body #deckPlan,body #deckPlan h4{color:#f6f3fb}
body #deckPlan>summary{min-height:48px;padding-block:12px;cursor:pointer;color:inherit;font-size:15px;line-height:1.5}
body #deckSteps{padding-left:22px;margin:16px 0 24px;font-size:16px;line-height:1.55;color:inherit}
body #deckSteps li+li{margin-top:12px}
body #deckInvite{margin:0 0 8px;padding:20px;background:#ffffff13;border-radius:18px;line-height:1.55;font-size:16px;color:inherit;user-select:text}

@media(max-width:360px){
  :root{--space-card:20px}
  body .next-move{padding-block:24px}
  body #chosenInvite{padding:20px}
  body #care .deck-actions{gap:8px}
  body #care .deck-actions button{font-size:12px;padding-inline:6px}
}

/* Profile actions lead; optional facts and forms retain the same clear space. */
body .partner-row{grid-template-columns:56px minmax(0,1fr) 88px}
body .partner-score small{line-height:1.35;font-size:10px}
body #partnerPrimaryActions{margin:24px 0;gap:12px}
body #partnerPrimaryActions .button{min-height:52px;line-height:1.35}
body .partner-score-note{font-size:12px;line-height:1.55;margin:16px 0 24px;color:#77707f}
body .partner-facts{gap:12px;margin-block:24px}
body .partner-facts>div{padding:12px;line-height:1.5}
body #partnerPreferences>h3,body #partnerIntimacy>h3{margin:0 0 16px}
body #partnerPreferencesForm{display:grid;gap:24px;margin-top:24px}
body #partnerPreferencesForm fieldset{margin:0;padding:0;border:0;min-width:0}
body #partnerPreferencesForm legend{margin-bottom:16px}
body #partnerPreferencesForm label{display:block;margin-bottom:12px;line-height:1.5}
body #partnerPreferencesForm textarea{margin:0}
body .partner-preference-favorites,body .partner-preference-stage{display:grid;gap:12px}
body .partner-preference-footer{display:grid;gap:16px}
body .partner-preference-footer .button{min-height:52px}
body #showIntimacyEvent{margin:16px 0;min-height:48px}
body #intimacyEventForm{display:grid;gap:20px;margin:8px 0 28px}
body #intimacyEventForm[hidden]{display:none}
body #intimacyEventForm label{display:block;margin-bottom:12px;font-size:14px}
body #intimacyEventForm input,body #intimacyEventForm select{
  box-sizing:border-box;min-width:0;width:100%;min-height:48px;padding:12px;font:inherit;
}
body #intimacyEventForm .touch-options{gap:12px}
body #intimacyEventForm>.primary{margin:0;min-height:52px}
body #intimacyEventStatus:not(:empty){font-size:13px;line-height:1.5}
body .intimacy-events>div{padding-block:16px}
@media(max-width:360px){
  body .partner-row{grid-template-columns:44px minmax(0,1fr) 80px;gap:10px}
  body #partnerPrimaryActions{grid-template-columns:1fr}
}

/* Browsing cues and personalisation links stay readable without crowding the card. */
body .deck-browse-help,body .deck-swipe-help{
  display:block;font-size:13px;line-height:1.55;color:#77707f;margin:20px 0;
}
body .recommendation-tuning{display:grid;gap:10px;margin:16px 0 24px}
body .recommendation-tuning button{
  justify-self:start;min-height:44px;padding:10px 14px;font:inherit;font-size:13px;
  line-height:1.4;text-align:left;border-radius:14px;background:#eee8f7;color:#60418e;
}
body .recommendation-help{font-size:12px;line-height:1.5;color:#77707f;margin:0}
body .opener-overline{font-size:12px;line-height:1.5;margin:24px 0 16px;color:#77707f}
body #deckSwipeHelp{margin:20px 0 0}
body #deckSwipeHelp+.deck-actions{margin-top:12px}
body #deckMeta{margin-bottom:20px;line-height:1.5}

body #attentionCards article{display:grid;gap:16px}
body #attentionCards article>h3,body #attentionCards article>p,body #attentionCards article>small{margin:0}
body #attentionCards article>small{display:block;line-height:1.55}
body #attentionCards .touch-options{gap:12px}

/* Ideas reveal their plan; the Write tab copies a clearly marked outgoing message. */
body #deckCard .deck-audience{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
body #deckCard .deck-audience-label{font-size:13px;font-weight:600;line-height:1.5;color:#744ac0}
body #care #deckCard .deck-audience #deckMeta{margin:0;font-size:12px;line-height:1.5}
body #care #deckPlan{margin-top:20px;padding-top:4px;border-top-color:#e3dae9;color:#65576f}
body #care #deckPlan>summary{font-weight:500;color:inherit}
body #care #deckSteps{margin:12px 0 8px;color:inherit}
body #care #deckMessage{margin-top:24px;padding:20px;background:#f1eafa;border:1px solid #e5d9f5;border-radius:20px;color:#2d2438}
body #care #deckMessage h4{font-size:14px;line-height:1.5;font-weight:600;margin:0 0 12px;color:#744ac0}
body #care #deckMessage #deckInvite{font-size:17px;line-height:1.55;margin:0;padding:0;background:none;border:0;border-radius:0;color:inherit;white-space:pre-line;overflow-wrap:anywhere}
body #care #deckMessage .deck-message-help{font-size:12px;line-height:1.55;margin:16px 0 0;color:#766483}
body #care #deckMessage.no-invite .deck-message-help{display:none}
body #care #openers #copyOpener{background:#8656ec;color:#fff}
body #care #openers #laterOpener,body #care #openers #nextOpener{background:#eee8f7;color:#51445e}
body #care #openers .opener-overline{font-weight:600;color:#744ac0}
body #care #deckCard:is([data-category=message],[data-category=home]) .deck-audience-label{color:#d4b8ff}
body #care #deckCard:is([data-category=message],[data-category=home]) #deckPlan{color:#e4d9ee;border-top-color:#ffffff30}
body #care #deckCard:is([data-category=message],[data-category=home]) #deckMessage{background:#38313f;border-color:#54475f;color:#f7f3fb}
body #care #deckCard:is([data-category=message],[data-category=home]) #deckMessage h4{color:#d4b8ff}
body #care #deckCard:is([data-category=message],[data-category=home]) .deck-message-help{color:#c7b9d1}
@media(max-width:360px){body #care #deckMessage{padding:16px}body #care #deckMessage #deckInvite{font-size:16px}}