/* Settings production polish
   Keeps the existing settings workflows intact while sharing the quieter,
   table-led interaction language used by Guests, Itinerary, and To-Do. */
#section-settings{
  --settings-row-hover:color-mix(in srgb,var(--accent) 4%,var(--surface));
}
#section-settings .settings-tab-toolbar{position:relative;z-index:2}
#section-settings .settings-tabs{
  box-shadow:0 8px 24px rgba(47,34,29,.055);
}
#section-settings .settings-tab{
  min-height:40px;
  transition:color .16s ease,background-color .18s ease,box-shadow .2s ease,transform .2s cubic-bezier(.22,1,.36,1);
}
#section-settings .settings-tab:not(.active):hover{background:color-mix(in srgb,var(--surface) 74%,transparent);transform:translateY(-1px)}
#section-settings .settings-tab:active{transform:scale(.98)}
#section-settings .settings-tab-panel{animation:settingsPanelIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes settingsPanelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

#section-settings .settings-section.card{
  border-color:color-mix(in srgb,var(--border) 88%,transparent);
  box-shadow:0 5px 18px rgba(47,34,29,.035);
}
#section-settings .settings-row{gap:14px}
#section-settings .settings-row > .settings-section{
  transition:border-color .18s ease,box-shadow .2s ease,transform .2s cubic-bezier(.22,1,.36,1);
}
@media(hover:hover) and (pointer:fine){
  #section-settings .settings-row > .settings-section:hover{
    border-color:color-mix(in srgb,var(--accent) 23%,var(--border));
    box-shadow:0 8px 22px rgba(47,34,29,.05);
    transform:translateY(-1px);
  }
}
/* No divider under each partner block. Each field inside already carries its
   own hairline, so this added a second, wider line directly above the help
   text — the stray rule that kept reappearing. */
#section-settings .settings-couple-person{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
#section-settings #aiAssistantCard label:has(#aiAssistantEnabled),
#section-settings #emailReminderCard label:has(#emailReminderEnabled){
  padding:10px 0 13px !important;
  border:0 !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:0 !important;
  background:transparent !important;
}
#section-settings .field .input,
#section-settings .field .select,
#section-settings textarea{
  transition:border-color .16s ease,box-shadow .18s ease,background-color .16s ease;
}
#section-settings .field .input:hover,
#section-settings .field .select:hover,
#section-settings textarea:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
#section-settings .field .input:focus,
#section-settings .field .select:focus,
#section-settings textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent);
}
#section-settings .font-tile,
#section-settings .theme-swatch,
#section-settings .settings-feel-option,
#section-settings .pill-check{
  transition:border-color .16s ease,background-color .16s ease,box-shadow .2s ease,transform .2s cubic-bezier(.22,1,.36,1);
}
@media(hover:hover) and (pointer:fine){
  #section-settings .font-tile:hover,
  #section-settings .theme-swatch:hover,
  #section-settings .settings-feel-option:hover,
  #section-settings .pill-check:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(47,34,29,.07)}
}

/* Data and backups: one continuous, scannable table rather than cards in cards. */
#settingsPanel-data .backup-history-note,
#settingsPanel-data .backup-restore-card{
  margin:0;
  padding:16px 2px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#settingsPanel-data .backup-history-note{padding-top:2px}
#settingsPanel-data .backup-history-rules{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:12px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
#settingsPanel-data .backup-history-rules div{
  padding:12px 14px;
  border:0;
  border-right:1px solid var(--border);
  border-radius:0;
  background:transparent;
}
#settingsPanel-data .backup-history-rules div:last-child{border-right:0}
#settingsPanel-data .snapshot-row{
  margin:0;
  padding:13px 4px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
  transition:background-color .16s ease,padding .18s ease;
}
#settingsPanel-data .snapshot-row:hover{padding-inline:10px;background:var(--settings-row-hover)}
#settingsPanel-data .data-danger-zone{border-bottom-color:color-mix(in srgb,var(--danger) 38%,var(--border))}
#settingsPanel-data .export-grid{gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
#settingsPanel-data .export-card{
  min-height:150px;
  margin:0;
  padding:18px;
  border:0;
  border-right:1px solid var(--border);
  border-radius:0;
  box-shadow:none;
}
#settingsPanel-data .export-card:last-child{border-right:0}
#settingsPanel-data .export-card:hover{transform:none;background:var(--settings-row-hover);box-shadow:none}
#section-settings .pre-reset-backup-block{
  padding:0;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  background:transparent;
}
#section-settings .pre-reset-heading{padding-top:12px}
#section-settings .pre-reset-row{
  min-height:48px;
  padding:8px 4px;
  transition:background-color .16s ease,padding .18s ease;
}
#section-settings .pre-reset-row:hover{padding-inline:10px;background:var(--settings-row-hover)}

/* Shared backup chooser: a compact action table. */
.backup-choice-modal{max-width:620px}
.backup-choice-head{text-align:center;padding:2px 8px 18px}
.backup-choice-head h2{margin:0 0 5px;font-family:var(--font-heading);font-weight:500;font-size:1.55rem}
.backup-choice-head p{max-width:50ch;margin:0 auto;color:var(--ink-muted);font-size:.86rem;line-height:1.5}
.backup-choice-table{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.backup-choice-label{padding:12px 4px 7px;font:700 .66rem/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.backup-choice-row{
  appearance:none;
  width:100%;
  min-height:64px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 22px;
  align-items:center;
  gap:12px;
  padding:11px 5px;
  border:0;
  border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:background-color .16s ease,padding .18s ease,color .16s ease;
}
.backup-choice-row:hover,.backup-choice-row:focus-visible{padding-inline:11px;background:var(--settings-row-hover);outline:none}
.backup-choice-row-icon{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  color:var(--accent);background:var(--accent-soft);
}
.backup-choice-row-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.backup-choice-row strong{display:block;font-size:.9rem}
.backup-choice-row small{display:block;margin-top:2px;color:var(--ink-muted);font-size:.76rem;line-height:1.35}
.backup-choice-row-arrow{font-size:1.2rem;color:var(--ink-muted);transition:transform .18s ease}
.backup-choice-row:hover .backup-choice-row-arrow{transform:translateX(3px);color:var(--accent)}

@media(max-width:760px){
  #settingsPanel-data .backup-history-rules{grid-template-columns:1fr 1fr}
  #settingsPanel-data .backup-history-rules div:nth-child(2){border-right:0}
  #settingsPanel-data .backup-history-rules div:nth-child(-n+2){border-bottom:1px solid var(--border)}
}
@media(max-width:560px){
  #settingsPanel-data .backup-history-rules{grid-template-columns:1fr}
  #settingsPanel-data .backup-history-rules div{border-right:0;border-bottom:1px solid var(--border)}
  #settingsPanel-data .export-grid{display:block}
  #settingsPanel-data .export-card{border-right:0;border-bottom:1px solid var(--border)}
}
@media(prefers-reduced-motion:reduce){
  #section-settings .settings-tab-panel{animation:none}
  #section-settings *, .backup-choice-row, .backup-choice-row-arrow{transition:none!important}
}

/* ============================================================
   DATA + HELP — same language as the rest of Settings
   Both tabs were the last places still built out of boxes: the export cards
   sat in a rigid ruled strip, and every FAQ was its own bordered card. They
   now use the hairline-and-rhythm treatment used everywhere else.
   ============================================================ */

/* --- Data: export cards --- */
/* A 4-across strip with hard vertical rules forced long copy into narrow
   columns and read as a table. Let them wrap and separate by space. */
#settingsPanel-data .export-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 26px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
#settingsPanel-data .export-card{
  min-height:0;
  padding:18px 0;
  border:0;
  border-right:0;
  border-radius:0;
  box-shadow:none;
}
#settingsPanel-data .export-card:hover{background:transparent}
/* Full-width brown buttons: these are the point of the card, so they carry
   the primary weight. */
#settingsPanel-data .export-card .btn{
  width:100%;
  justify-content:center;
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--accent-on);
  font-weight:650;
}
#settingsPanel-data .export-card .btn:hover{
  background:color-mix(in srgb,var(--accent) 88%,var(--ink));
  border-color:color-mix(in srgb,var(--accent) 88%,var(--ink));
}

/* The inactive Export/Restore/Import guide columns were so faint they read as
   broken rather than secondary. */
#settingsPanel-data .data-tab-guide div{opacity:.72}
#settingsPanel-data .data-tab-guide div.active{opacity:1}

/* --- Help: FAQ list --- */
/* Rows divided by hairlines, not a stack of bordered cards. */
#settingsPanel-help .faq-item{
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  border-radius:0;
  background:transparent;
}
#settingsPanel-help .faq-item:last-child{border-bottom:0}
/* Condensed when closed: 15px of vertical padding on every row made a list of
   a dozen questions very long before anything was even opened. */
#settingsPanel-help .faq-question{
  padding:10px 4px;
  border-radius:0;
  font-size:.9rem;
  transition:color .16s ease;
}
#settingsPanel-help .faq-answer{padding-inline:4px}
#settingsPanel-help .faq-item.open .faq-answer{padding-bottom:12px}
#settingsPanel-help .faq-item:hover .faq-question{color:var(--accent)}
/* The search panel was a boxed card above a boxed list; make it a header. */
#settingsPanel-help .help-hero{
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
  padding-inline:0;
}

/* --- Email reminders: pair rows instead of one tall stack --- */
/* Every line was its own full-width row, so the card ran very tall for what
   is really four short settings. Recipient sits beside the weekly-digest
   toggle, and the deadline label beside its pills. */
/* --- Email reminders: readable rows, not far-flung controls --- */
/* The control sat hard against the right edge, a long way from the label it
   belongs to. Cap each row so the pair reads as one setting. */
#emailReminderCard #emailReminderRecipientRow,
#emailReminderCard #emailReminderDeadlineRow,
#emailReminderCard #emailReminderIcsRow{
  padding-block:11px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 62%,transparent);
}
#emailReminderCard #emailReminderIcsRow{border-bottom:0}
/* Nicer checkbox rows: a real target with a faint wash on hover, matching
   the venue inclusion list. */
#emailReminderCard label:has(#emailReminderWeekly){
  padding:7px 10px;
  margin-right:-10px;
  border-radius:var(--radius-control);
  transition:background-color .16s ease;
}
#emailReminderCard label:has(#emailReminderWeekly):hover{
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
#emailReminderCard .pill-check{transition:background-color .16s ease,border-color .16s ease}
#emailReminderCard .pill-check:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}

@media (min-width:760px){
  #emailReminderCard #emailReminderRecipientRow{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
  }
  #emailReminderCard #emailReminderDeadlineRow{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
  }
  #emailReminderCard #emailReminderDeadlineRow > div:first-child{min-width:0}
  #emailReminderCard #emailReminderOffsets{margin-top:0 !important}
  /* Calendar file: description left, action right. */
  #emailReminderCard #emailReminderIcsRow{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
  }
  #emailReminderCard #emailReminderIcsRow .settings-card-footer{margin:0 !important}
  #emailReminderCard #emailReminderIcsRow p{margin-bottom:0 !important}
}

/* The whole snapshot row toggles its details, so it must read as clickable. */
#settingsPanel-data .snapshot-row{cursor:pointer}
#settingsPanel-data .snapshot-row .snapshot-details{cursor:default}

/* The opt-in gate, expressed in CSS as well as JS. renderEmailReminderSettings()
   sets [hidden], but :has() means the options also collapse the instant the
   box is unticked — no dependency on a re-render running first. */
#emailReminderCard:not(:has(#emailReminderEnabled:checked)) #emailReminderOptions{
  display:none;
}