/* وصلها 4 — practice tools: idea practice («أسئلة الأفكار»), its review
   («تدريباتي وملاحظاتي») and practice papers («النماذج الشاملة»). The question
   pieces shared with the level exams (options, help, feedback, answer review,
   question map) are styled in study.css. */

/* Disclosure rows share the study.css rule; the danger zone keeps its colour. */
.danger-zone > summary { color: var(--danger); }

/* ---------- Runner extras ---------- */
.runner-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.runner-meta .kicker { display: inline; }
.runner-status { color: var(--text-2); font-size: var(--text-sm); }
.runner-status[role="alert"] { color: var(--danger); font-weight: 500; }
.runner-clock {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none; min-height: var(--control-sm); padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--text-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.runner-clock.is-over { border-color: var(--warning); color: var(--warning); }
.question-objective { font-size: var(--text-sm); }
.flag-label { display: grid; gap: 2px; line-height: var(--leading-ui); }
.topic-runner .feedback { scroll-margin-block: 96px var(--space-5); }
.question-video { display: grid; gap: var(--space-3); padding-block-start: var(--space-2); }

/* ---------- Topic list ---------- */
.topic-lead { max-width: 62ch; }
.saving-note { display: flex; align-items: center; gap: var(--space-2); }
.idea-topic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.idea-topic {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "number main arrow" "number status arrow";
  align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-4);
}
.idea-topic-number { grid-area: number; font-size: var(--text-xl); color: var(--ribbon, var(--accent)); text-align: center; }
.idea-topic-main { grid-area: main; display: grid; gap: 2px; min-width: 0; }
.idea-topic-main strong { font-size: var(--text-body); font-weight: 600; }
.idea-topic-status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.idea-topic-status:empty { display: none; }
.idea-topic .row-arrow { grid-area: arrow; }
@media (min-width: 600px) {
  .idea-topic { grid-template-columns: 40px minmax(0, 1fr) auto auto; grid-template-areas: "number main status arrow"; padding: var(--space-4) var(--space-5); }
  .idea-topic-status { display: grid; justify-items: end; }
}
.topic-links { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .topic-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Loading skeletons ---------- */
.practice-skeleton { display: grid; gap: var(--space-3); }
.practice-skeleton .skeleton { height: 84px; }
.practice-skeleton .skeleton:first-child { height: 140px; margin-block-end: var(--space-4); }

/* ---------- Topic review («تدريباتي وملاحظاتي») ---------- */
.review-filters { display: grid; gap: var(--space-3); align-items: end; }
@media (min-width: 768px) { .review-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; } }
.topic-review-list { display: grid; gap: var(--space-3); }
.topic-review-card { display: grid; gap: var(--space-3); }
.topic-review-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.topic-review-head h3 { margin-block-end: 2px; }
.review-questions { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.review-question { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); }
.note-preview { display: block; white-space: pre-line; overflow-wrap: anywhere; }
.danger-zone { padding: 0 var(--space-4); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--radius-card); }
.danger-zone[open] { display: grid; gap: var(--space-3); padding-block-end: var(--space-4); }

/* ---------- Practice paper: setup ---------- */
.paper-shell { width: 100%; max-width: 960px; margin-inline: auto; padding: 0 var(--space-4) var(--space-7); }
.paper-setup { gap: var(--space-6); padding-block-start: var(--space-5); }
.format-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.format-choice legend { margin-block-end: var(--space-3); padding: 0; font-weight: 600; }
.format-options { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .format-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.format-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface-1); cursor: pointer;
  transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.format-option:hover { border-color: var(--control); }
.format-option input { width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--accent); }
.format-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.format-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.format-option input:focus-visible { outline: none; }
.format-option-body { display: grid; gap: var(--space-2); min-width: 0; }
.format-option-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.paper-brief { display: grid; gap: var(--space-4); }
.paper-brief h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.paper-facts { display: grid; gap: 0; margin: 0; }
.paper-facts div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--space-4); padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
.paper-facts dt { color: var(--text-3); font-size: var(--text-sm); }
.paper-facts dd { margin: 0; }
@media (min-width: 768px) {
  .paper-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .paper-facts div { display: grid; justify-content: stretch; }
}
.paper-scope ul { margin: 0; padding-inline-start: var(--space-5); color: var(--text-2); }

/* ---------- Practice paper: questions, review and result ---------- */
.paper-runner #paper-answer { min-height: 200px; }
.confirm-subtitle { font-size: var(--text-lg); margin-block-end: var(--space-2); }
.answer-heading { font-size: var(--text-sm); color: var(--text-2); }
.written-answer { padding: var(--space-3) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-control); background: var(--surface-2); white-space: pre-wrap; }
.model-answer { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface-2); text-align: left; }
.rubric { display: grid; gap: var(--space-1); min-width: 0; margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); }
.rubric legend { padding: 0 var(--space-1); font-weight: 600; }
.paper-skeleton { display: grid; gap: var(--space-4); }
.paper-skeleton .skeleton { height: 220px; }
.paper-skeleton .skeleton:first-child { height: 56px; }