/* Shared prose styling for legal.html and faq.html — separate from styles.css
   so the Home page's stylesheet stays untouched. */

.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(32px, 6vw, 64px) 16px clamp(60px, 10vw, 100px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line, rgba(15,27,45,0.12));
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  background: var(--bg, #FBF5E8);
  z-index: 10;
  padding-top: 4px;
}

.legal-tabs button {
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #8A7756;
  border-bottom: 2px solid transparent;
}

.legal-tabs button.active {
  color: #B9852E;
  border-bottom-color: #B9852E;
}

.legal-panel { display: none; flex-direction: column; gap: 16px; }
.legal-panel.active { display: flex; }

.legal-panel h1 { font-size: clamp(22px, 3vw, 28px); font-family: 'Sora', sans-serif; margin: 0; }
.legal-panel h2 { font-size: 16px; font-family: 'Sora', sans-serif; margin: 10px 0 0; }
.legal-panel p { font-size: 13.5px; line-height: 1.75; color: #4A3B24; margin: 0; }
.legal-panel ul, .legal-panel ol { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.75; color: #4A3B24; }
.legal-panel .updated { font-size: 12.5px; color: #8A7756; margin: 0; }
.legal-panel .notice { font-size: 13px; line-height: 1.7; color: #4A3B24; margin: 0; padding: 12px 14px; background: #FBF1DB; border-radius: 10px; border: 1px solid rgba(185,133,46,0.25); }

.legal-panel .field { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.legal-panel .field span { font-size: 12.5px; color: #8A7756; }
.legal-panel .field input, .legal-panel .field textarea {
  padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(42,26,8,0.15);
  font-family: 'Manrope', sans-serif; font-size: 13.5px; resize: vertical;
}
.legal-panel .danger-btn {
  align-self: flex-start; padding: 11px 24px; border-radius: 999px; border: none;
  background: #E05B49; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}
.legal-panel .danger-btn[disabled] { opacity: 0.7; cursor: default; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border-radius: 14px; background: #FFFFFF; border: 1px solid rgba(42,26,8,0.08); overflow: hidden; }
.faq-item button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Manrope', sans-serif;
}
.faq-item .q { font-size: 14.5px; font-weight: 700; color: #2A1A08; }
.faq-item .sym { font-size: 18px; color: #B9852E; flex-shrink: 0; }
.faq-item .a { margin: 0; padding: 0 20px 18px; font-size: 13.5px; line-height: 1.65; color: #6B5A3E; display: none; }
.faq-item.open .a { display: block; }

.faq-contact { text-align: center; margin-top: 4px; padding: 28px; border-radius: 16px; background: #FBF1DB; }
.faq-contact p { margin: 0 0 10px; font-size: 14px; color: #2A1A08; }
.faq-contact a { font-size: 14px; font-weight: 700; color: #B9852E; text-decoration: none; }

/* Terms versioning (standing practice, 2026-10-05): the current version's additions show green,
   deletions red and struck through. The next version clears these marks. */
.legal-panel .terms-added { color: #1F9D57; }
.legal-panel .terms-deleted { color: #C0392B; text-decoration: line-through; }
.legal-panel .terms-legend { font-size: 12.5px; color: #8A7756; margin: 6px 0 0; }