/* المحتوى (sheikh/content.js + content-forms.js), the content parts of «الإعدادات»: sections, application questions and
   video, assessment forms, references. Buttons, fields, chips and cards take the navy design from settings.css. */
.ct-hint { margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--fill); color: var(--ink-2); font-size: var(--text-md); line-height: 1.7; }
.ct-hint svg { flex: none; margin-top: 3px; color: var(--brand); }
.ct-conds { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 2px; line-height: 1.7; }
.ct-conds li::marker { color: var(--gold-mark); }
.ct-general { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; }
.ct-general > h3 { flex-basis: 100%; }
.ct-general .ct-conds { flex: 1 1 260px; font-size: var(--text-base); font-weight: 500; }
.ct-general .ct-hint { flex: 2 1 360px; }

/* a section: its name, the length and kind as chips, its rows, and open/closed with «تعديل» at the foot */
.ct-sec { justify-content: space-between; }
.ct-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ct-sec-head h3 { flex: 1 1 100%; margin-bottom: 2px; }
.st-panel .ct-sec-head .tag.ok { background: var(--brand-soft); color: var(--brand); }
.ct-sec .rows { grid-template-columns: 76px minmax(0, 1fr); gap: 8px 14px; font-size: var(--text-md); line-height: 1.6; }
.ct-sec .rows dt { color: var(--ink-3); }
.ct-sec.closed { background: #F8F9FC; }
.ct-sec.closed .rows { opacity: .7; }
.ct-sec-foot { justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
/* an on/off switch (a button with aria-pressed) */
.ct-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 2px; border: 0; background: none; font-size: var(--text-md); font-weight: 700; color: var(--ink); }
.ct-switch i { position: relative; flex: none; width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--fill-2); transition: background-color 200ms ease; }
.ct-switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(16, 27, 58, .25); transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.ct-switch[aria-pressed="true"] i { background: var(--navy-2); }
.ct-switch[aria-pressed="true"] i::after { transform: translateX(-18px); }   /* to the end side (the page is right to left) */
/* what is saved shows in green */
.st-panel :is(.ct-sec-foot, .ct-video, .ct-refs) .tag.ok { background: var(--live-soft); color: var(--live); }
.st-panel .tag.no { background: var(--danger-bg); color: var(--danger); }
.ct-edit { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: var(--fill); }
.st-panel .ct-edit .field select { max-width: 220px; background: var(--surface); }
.ct-set { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; }
.ct-set legend { padding: 0; margin-bottom: 6px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ct-check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--text-base); cursor: pointer; }
.ct-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy-2); }
.ct-edit .ct-hint { background: var(--brand-soft); color: var(--brand); }

/* application questions and the video */
.ct-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ct-q { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ct-q:last-child { border-bottom: 0; }
.ct-q-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: var(--text-sm); font-weight: 800; display: grid; place-items: center; }
.ct-q-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.ct-q-t b { font-size: 15.5px; font-weight: 700; }
.ct-q-t small { font-size: var(--text-sm); color: var(--ink-3); }
.ct-q.editing { display: block; }
.ct-q-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--fill); }
.st-panel .ct-q-form .field input { background: var(--surface); }
.ct-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-panel .ct-add .btn { height: 44px; }
.ct-add .err { flex-basis: 100%; margin: 0; }
.ct-grow { flex: 1 1 240px; }
.ct-reset { align-self: flex-start; }
.ct-video h3 { display: flex; align-items: center; gap: 8px; }
.ct-video h3 svg { color: var(--brand); }
.st-panel .ct-mins input { width: 120px; text-align: center; font-weight: 700; }
/* a table inside a card: a hairline box instead of a second shadow */
.st-panel .i-card .tbl-box { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.ct-part { width: 100%; min-width: 220px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--fill); transition: border-color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out; }
.ct-part:focus, .ct-item-add input:focus { outline: none; border-color: var(--navy-2); background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft); }

/* assessment forms */
.ct-survey-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.ct-survey-top select { min-width: 280px; }
.st-panel .ct-survey-top .field select { background: var(--surface); box-shadow: var(--shadow); border-color: transparent; }
.ct-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ct-items li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: var(--text-base); line-height: 1.6; }
.ct-items li:last-child { border-bottom: 0; }
.ct-item-add { display: flex; gap: 8px; margin-top: auto; }
.ct-item-add input { flex: 1; min-width: 0; height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--fill); transition: border-color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out; }
.ct-item-add input::placeholder { color: var(--ink-3); }
.st-panel .ct-item-add .btn { flex: none; padding: 0 16px; }
/* the levels in their grade's colour */
.st-panel .tag.ct-grade { height: 28px; padding: 0 12px; font-size: 13px; }
.st-panel .ct-grade.g4 { background: var(--live-soft); color: var(--live); }
.st-panel .ct-grade.g3 { background: var(--brand-soft); color: var(--brand); }
.st-panel .ct-grade.g2 { background: var(--amber-bg); color: var(--amber); }
.st-panel .ct-grade.g1 { background: var(--danger-bg); color: var(--danger); }
.st-panel .ct-grade.gna { background: var(--fill-2); color: var(--ink-2); }
.ct-rule { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--navy-wash); box-shadow: inset 0 0 0 1px #E1E7F5; color: var(--brand); font-size: var(--text-base); font-weight: 500; line-height: 1.7; }
.ct-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ct-versions li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--text-base); }
.ct-versions li:last-child { border-bottom: 0; }
.ct-versions li span:not(.tag) { color: var(--ink-2); }
.ct-versions li .tag, .ct-versions li .btn { margin-inline-start: auto; }
.st-panel .ct-versions .tag.ok { background: var(--brand-soft); color: var(--brand); }
.ct-versions li.draft { padding: 8px 12px; border-radius: 14px; border-bottom: 0; background: var(--amber-bg); }
.ct-versions li.draft span { color: var(--amber); }

/* references */
.ct-refs-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ct-refs-head p { margin: 0; flex: 1 1 360px; font-size: var(--text-base); line-height: 1.7; }
.ct-refs-head small { color: var(--ink-3); }
.ct-refs td { line-height: 1.5; }
.ct-refs td:first-child { min-width: 190px; }
.ct-refs td:nth-child(n+2):nth-child(-n+4) { white-space: nowrap; }
.ct-book { display: block; font-family: var(--quran); font-size: var(--text-lg); }
.ct-used { min-width: 200px; font-size: var(--text-md); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .ct-switch i, .ct-switch i::after { transition: none; } }
/* a phone: a question's text takes the row, its chip and buttons go under it on the end side */
@media (max-width: 760px) {
  .ct-q { flex-wrap: wrap; row-gap: 4px; }
  .ct-q-t { flex-basis: calc(100% - 42px); }
  .ct-q > :nth-child(3) { margin-inline-start: auto; }
  .ct-refs thead { display: none; }
  .ct-refs, .ct-refs tbody { display: block; }
  .ct-refs tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .ct-refs tr:first-child { border-top: 0; }
  .ct-refs td { padding: 0; border: 0; min-width: 0 !important; font-size: var(--text-md); color: var(--ink-2); }
  .ct-refs td:first-child { flex: 1 1 100%; color: var(--ink); }
  .ct-refs td:first-child small { display: block; }
  .ct-refs td:nth-child(3)::before, .ct-refs td:nth-child(4)::before { content: "، "; }
  .ct-refs td:nth-child(4)::after { content: " صفحة"; }
  .ct-refs td.ct-used { flex: 1 1 100%; font-size: var(--text-sm); }
  .ct-refs td:last-child { display: none; }   /* every reference is tied to the ayat: its head says so */
}