/* =========================
   FAMILY SYSTEMS PATCH ONLY
   Add to the BOTTOM of your existing stylesheet
   ========================= */

/* page wrappers */
.study-page,
.quiz-page,
.family-study-page,
.family-quiz-page,
main.study-guide-page,
main.quiz-page {
  max-width: 1200px;
  margin: 0 auto;
}

/* top hero sections */
.study-hero,
.quiz-hero,
.page-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f3f8fd 100%);
  border: 1px solid #d9e4ef;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(24, 47, 77, 0.08);
  margin-bottom: 24px;
}

.study-hero h1,
.quiz-hero h1,
.page-hero h1 {
  margin: 0 0 10px;
  color: #20364d;
}

.study-hero p,
.quiz-hero p,
.page-hero p {
  margin: 0;
  color: #5d6e80;
}

/* filter / control section */
.study-controls,
.quiz-controls,
.filters-card,
.controls-card,
.search-card {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(24, 47, 77, 0.06);
  margin-bottom: 22px;
}

/* keep existing layout, just improve spacing */
.study-controls form,
.quiz-controls form,
.filters-card form,
.controls-card form,
.search-card form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
}

/* fields */
.study-controls label,
.quiz-controls label,
.filters-card label,
.controls-card label,
.search-card label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  color: #29425c;
  margin-bottom: 6px;
}

.study-controls input[type="text"],
.study-controls input[type="search"],
.study-controls select,
.quiz-controls input[type="text"],
.quiz-controls input[type="search"],
.quiz-controls select,
.filters-card input[type="text"],
.filters-card input[type="search"],
.filters-card select,
.controls-card input[type="text"],
.controls-card input[type="search"],
.controls-card select,
.search-card input[type="text"],
.search-card input[type="search"],
.search-card select {
  min-width: 220px;
  border: 1px solid #c7d6e4;
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 0.96rem;
  background: #fff;
  color: #23384e;
}

.study-controls input[type="text"]:focus,
.study-controls input[type="search"]:focus,
.study-controls select:focus,
.quiz-controls input[type="text"]:focus,
.quiz-controls input[type="search"]:focus,
.quiz-controls select:focus,
.filters-card input[type="text"]:focus,
.filters-card input[type="search"]:focus,
.filters-card select:focus,
.controls-card input[type="text"]:focus,
.controls-card input[type="search"]:focus,
.controls-card select:focus,
.search-card input[type="text"]:focus,
.search-card input[type="search"]:focus,
.search-card select:focus {
  outline: none;
  border-color: #6b98c7;
  box-shadow: 0 0 0 4px rgba(107, 152, 199, 0.14);
}

.study-controls select:disabled,
.filters-card select:disabled,
.controls-card select:disabled,
.search-card select:disabled {
  background: #eef2f6;
  color: #8392a0;
}

/* buttons - do NOT flatten them */
.study-controls .btn,
.quiz-controls .btn,
.filters-card .btn,
.controls-card .btn,
.search-card .btn,
.study-controls button,
.quiz-controls button,
.filters-card button,
.controls-card button,
.search-card button,
.study-controls input[type="submit"],
.quiz-controls input[type="submit"],
.filters-card input[type="submit"],
.controls-card input[type="submit"],
.search-card input[type="submit"] {
  border-radius: 12px;
  padding: 11px 16px;
  font-weight: 700;
}

/* content sections/cards */
.study-results .study-card,
.study-card,
.result-card,
.document-card,
.full-content-card,
.quiz-card,
.question-card,
.score-card,
.feedback-box {
  background: #ffffff;
  border: 1px solid #dbe5ef;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(24, 47, 77, 0.06);
}

/* study content cards */
.study-card,
.result-card,
.document-card,
.full-content-card {
  padding: 20px;
  margin-bottom: 18px;
}

.study-card h2,
.study-card h3,
.result-card h2,
.result-card h3,
.document-card h2,
.document-card h3,
.full-content-card h2,
.full-content-card h3 {
  margin-top: 0;
  color: #20364d;
}

.study-card p,
.result-card p,
.document-card p,
.full-content-card p {
  color: #556779;
}

/* little pills / meta tags */
.doc-badge,
.week-badge,
.topic-badge,
.meta-pill,
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-right: 8px;
  margin-bottom: 8px;
}

.doc-badge {
  background: #eaf3fb;
  color: #29527a;
}

.week-badge {
  background: #f1f4f8;
  color: #596c7e;
}

.topic-badge {
  background: #edf8ef;
  color: #3f6a43;
}

/* quiz question area */
.question-card,
.quiz-card {
  padding: 24px;
  margin-bottom: 20px;
}

.question-card h2,
.quiz-card h2 {
  margin-top: 0;
  color: #20364d;
}

.quiz-options,
.answer-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.quiz-option,
.answer-option {
  border: 1px solid #d9e4ef;
  border-radius: 16px;
  padding: 14px 16px;
  background: #fbfdff;
  transition: all 0.18s ease;
}

.quiz-option:hover,
.answer-option:hover {
  border-color: #aec6dc;
  background: #f5faff;
}

.quiz-option label,
.answer-option label {
  color: #29425c;
  font-weight: 600;
}

/* feedback box only */
.feedback-box,
.answer-feedback,
.quiz-feedback {
  padding: 18px;
  margin-top: 18px;
}

.feedback-box.correct,
.answer-feedback.correct,
.quiz-feedback.correct {
  background: #edf8f0;
  border: 1px solid #b8dcc2;
  color: #1e5f36;
}

.feedback-box.incorrect,
.answer-feedback.incorrect,
.quiz-feedback.incorrect {
  background: #fff1f1;
  border: 1px solid #ebc1c1;
  color: #8a2e2e;
}

.feedback-box.correct h3,
.feedback-box.correct p,
.feedback-box.correct strong,
.answer-feedback.correct h3,
.answer-feedback.correct p,
.answer-feedback.correct strong,
.quiz-feedback.correct h3,
.quiz-feedback.correct p,
.quiz-feedback.correct strong,
.feedback-box.incorrect h3,
.feedback-box.incorrect p,
.feedback-box.incorrect strong,
.answer-feedback.incorrect h3,
.answer-feedback.incorrect p,
.answer-feedback.incorrect strong,
.quiz-feedback.incorrect h3,
.quiz-feedback.incorrect p,
.quiz-feedback.incorrect strong {
  color: inherit;
}

/* source line */
.feedback-source,
.document-source,
.source-line {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 0.82rem;
  font-weight: 700;
}

/* pagination */
.pagination,
.pagination-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.pagination a,
.pagination span,
.page-link,
.page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #d4e0eb;
  background: #fff;
  color: #28425d;
  font-weight: 700;
  text-decoration: none;
}

.pagination a:hover,
.page-link:hover {
  background: #f2f8fd;
}

.pagination .active,
.page-current {
  background: #2c5d8f;
  color: #fff;
  border-color: #2c5d8f;
}

/* mobile */
@media (max-width: 768px) {
  .study-controls form,
  .quiz-controls form,
  .filters-card form,
  .controls-card form,
  .search-card form {
    flex-direction: column;
    align-items: stretch;
  }

  .study-controls input[type="text"],
  .study-controls input[type="search"],
  .study-controls select,
  .quiz-controls input[type="text"],
  .quiz-controls input[type="search"],
  .quiz-controls select,
  .filters-card input[type="text"],
  .filters-card input[type="search"],
  .filters-card select,
  .controls-card input[type="text"],
  .controls-card input[type="search"],
  .controls-card select,
  .search-card input[type="text"],
  .search-card input[type="search"],
  .search-card select {
    min-width: 100%;
  }
}