/* «منصّتي» section library: 11 types × 18 variants (plan §3.4; contract resources/academy/sections/schema.json).
   Root of every section: <section class="a-sec a-sec-<type> a-sec-<type>--<variant>" data-section="<id>">.
   Reads only --site-* variables from /theme.css (and site.css's buttons and .a-site-prose). Looks restyle through the
   variables and looks/<key>.css scoped under .a-look-<key>. Mobile first, RTL, no inline styles, no hex codes.
   The last block (sample stripes, «عدّل» chips, notes) only appears in the editor preview, never on a public page. */

/* ---------- Shared frame ---------- */
.a-sec { position: relative; padding-block: var(--site-section-pad); scroll-margin-top: 72px; }
.a-sec--band { background: var(--site-band); }
.a-sec__inner { width: 100%; max-width: var(--site-max); margin-inline: auto; padding-inline: max(var(--site-gutter), env(safe-area-inset-left)); }
.a-sec__head { display: grid; gap: 8px; max-width: 60ch; margin-bottom: 24px; }
.a-sec__head--center { justify-items: center; margin-inline: auto; text-align: center; }
.a-sec__title {
  margin: 0; color: var(--site-ink); font-family: var(--site-font-head); font-weight: var(--site-head-weight);
  line-height: var(--site-head-lh); font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); text-wrap: balance;
}
.a-sec__lead { margin: 0; color: var(--site-muted); font-size: 1.0625rem; }
.a-sec__foot { display: flex; justify-content: center; margin-top: 24px; }
/* The brand's marker band behind one word (==word== in the hero title). */
.a-sec-mark { padding-inline: .12em; color: inherit; background: linear-gradient(transparent 58%, var(--site-marker) 58%); }
/* The teacher's initials when there is no photo (public pages). */
.a-sec-avatar {
  display: grid; place-items: center; flex: none; width: var(--a-sec-avatar, 96px); aspect-ratio: 1; border-radius: 50%;
  background: var(--site-primary-tint); color: var(--site-ink); font-family: var(--site-font-head); font-weight: var(--site-head-weight);
  font-size: calc(var(--a-sec-avatar, 96px) * .36); line-height: 1;
}
.a-sec-photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- hero: center · split · wide · chalkboard ---------- */
.a-sec-hero { padding-block: clamp(36px, 7vw, 96px); }
.a-sec-hero__body { display: grid; gap: 16px; min-width: 0; }
.a-sec-hero__title {
  margin: 0; color: inherit; font-family: var(--site-font-head); font-weight: var(--site-head-weight);
  line-height: var(--site-head-lh); font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem); text-wrap: balance;
}
.a-sec-hero__sub { margin: 0; max-width: 46ch; color: var(--site-muted); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.a-sec-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.a-sec-hero__actions .a-site-btn { flex: 1 1 11rem; }
.a-sec-hero__media { position: relative; overflow: hidden; }
@media (min-width: 560px) { .a-sec-hero__actions .a-site-btn { flex: 0 0 auto; } }

.a-sec-hero--center .a-sec-hero__body { justify-items: center; max-width: 760px; margin-inline: auto; text-align: center; }
.a-sec-hero--center .a-sec-hero__media { width: 112px; aspect-ratio: 1; border-radius: 50%; --a-sec-avatar: 112px; }
.a-sec-hero--center .a-sec-hero__actions { justify-content: center; }

.a-sec-hero--split .a-sec-hero__grid { display: grid; gap: 24px; align-items: center; }
.a-sec-hero--split .a-sec-hero__media {
  order: -1; width: min(56%, 200px); aspect-ratio: 4 / 5; border-radius: var(--site-radius-img); background: var(--site-band); --a-sec-avatar: 120px;
}
.a-sec-hero--split .a-sec-hero__media > .a-sec-avatar { position: absolute; inset: 0; margin: auto; }
@media (min-width: 768px) {
  .a-sec-hero--split .a-sec-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; }
  .a-sec-hero--split .a-sec-hero__media { order: 0; width: 100%; max-width: 400px; justify-self: end; }
}

/* wide: the picture on top, the words on a card that overlaps it (always readable, whatever the picture). */
.a-sec-hero--wide { padding-top: 0; }
.a-sec-hero--wide .a-sec-hero__media { aspect-ratio: 16 / 9; max-height: 520px; width: 100%; background: var(--site-band); }
.a-sec-hero--wide .a-sec-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.a-sec-hero--wide .a-sec-hero__body {
  position: relative; margin-top: -32px; padding: 20px; background: var(--site-surface);
  border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius); box-shadow: var(--site-shadow-raised);
}
@media (min-width: 768px) {
  .a-sec-hero--wide .a-sec-hero__media { aspect-ratio: 21 / 9; }
  .a-sec-hero--wide .a-sec-hero__body { max-width: 640px; margin-top: -96px; padding: 32px; }
}

/* chalkboard: a board panel; the marked word is written in chalk. */
.a-sec-hero--chalkboard .a-sec-hero__board {
  display: grid; gap: 20px; padding: 28px 20px; border-radius: var(--site-radius); text-align: center; justify-items: center;
  background: var(--site-board); color: var(--site-on-board); box-shadow: inset 0 0 0 6px var(--site-band), var(--site-shadow);
}
.a-sec-hero--chalkboard .a-sec-hero__body { justify-items: center; }
.a-sec-hero--chalkboard .a-sec-hero__sub { color: var(--site-on-board); opacity: .9; }
.a-sec-hero--chalkboard .a-sec-mark {
  background: none; color: var(--site-chalk); text-decoration: underline; text-decoration-color: var(--site-chalk);
  text-decoration-thickness: 3px; text-underline-offset: .3em;
}
.a-sec-hero--chalkboard .a-sec-hero__media { width: 96px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px var(--site-chalk); --a-sec-avatar: 96px; }
.a-sec-hero--chalkboard .a-sec-hero__actions { justify-content: center; }
.a-sec-hero--chalkboard .a-site-btn--outline,
.a-sec-hero--chalkboard .a-site-btn--whatsapp { background: transparent; color: var(--site-on-board); border-color: currentColor; }
.a-sec-hero--chalkboard .a-site-btn--whatsapp .a-site-icon { color: currentColor; }
@media (min-width: 768px) { .a-sec-hero--chalkboard .a-sec-hero__board { padding: 56px 48px; } }

/* ---------- about: side · card ---------- */
.a-sec-about__grid { display: grid; gap: 20px; align-items: start; }
.a-sec-about__media { width: 140px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--site-band); --a-sec-avatar: 140px; }
.a-sec-about__body { display: grid; gap: 14px; min-width: 0; }
.a-sec-about__points { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.a-sec-about__point {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--site-primary-tint); color: var(--site-ink); font-size: .9375rem; font-weight: 600; line-height: 1.5;
}
@media (min-width: 768px) {
  .a-sec-about--side .a-sec-about__grid { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
  .a-sec-about--side .a-sec-about__media { width: 100%; border-radius: var(--site-radius-img); --a-sec-avatar: 160px; }
}
.a-sec-about--card .a-sec-about__grid {
  max-width: 720px; margin-inline: auto; padding: 24px; justify-items: center; text-align: center;
  background: var(--site-surface); border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius); box-shadow: var(--site-shadow);
}
.a-sec-about--card .a-sec-about__media { width: 88px; --a-sec-avatar: 88px; }
.a-sec-about--card .a-sec-about__points { justify-content: center; }
.a-sec-about--card .a-site-prose { margin-inline: auto; }
@media (min-width: 768px) { .a-sec-about--card .a-sec-about__grid { padding: 40px; } }

/* ---------- courses: grid · list (cards are shared with /courses) ---------- */
.a-sec-courses__list { display: grid; gap: var(--site-gap); margin: 0; padding: 0; list-style: none; }
.a-sec-courses--grid .a-sec-courses__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.a-sec-course {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--site-surface); border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius); box-shadow: var(--site-shadow);
  transition: border-color .2s;
}
.a-sec-course:hover { border-color: var(--site-outline); }
.a-sec-course:focus-within { outline: 3px solid var(--site-focus); outline-offset: 2px; }
.a-sec-course__cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--site-band); }
.a-sec-course__body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 16px; }
.a-sec-course__title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.45; }
.a-sec-course__link { color: var(--site-ink); text-decoration: none; }
.a-sec-course__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.a-sec-course__link:focus-visible { outline: none; }
.a-sec-course__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--site-muted); font-size: .875rem; }
.a-sec-course__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.a-sec-course__price { font-family: var(--site-font-head); font-weight: var(--site-head-weight); font-size: 1.125rem; }
.a-sec-course__go { color: var(--site-link); font-size: .9375rem; font-weight: 700; }
.a-sec-courses--list .a-sec-course { flex-direction: row; }
.a-sec-courses--list .a-sec-course__cover { width: 104px; height: auto; aspect-ratio: auto; align-self: stretch; flex: none; }
.a-sec-courses--list .a-sec-course__body { padding: 12px 14px; }
@media (min-width: 560px) {
  .a-sec-courses--list .a-sec-course__cover { width: 220px; aspect-ratio: 16 / 9; min-height: 0; }
  .a-sec-courses--list .a-sec-course__body { padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { .a-sec-course { transition: none; } }

/* ---------- stats: row ---------- */
.a-sec-stats__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.a-sec-stat {
  display: grid; justify-items: center; gap: 4px; padding: 18px 10px; text-align: center;
  background: var(--site-surface); border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius);
}
.a-sec-stats__value {
  font-family: var(--site-font-head); font-weight: var(--site-head-weight); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.2; color: var(--site-ink); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.a-sec-stats__value::after { content: ""; display: block; width: 32px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--site-accent); }
.a-sec-stats__label { color: var(--site-muted); font-size: .9375rem; line-height: 1.5; }

/* ---------- testimonials: quotes · whatsapp ---------- */
.a-sec-testimonials__list { display: grid; gap: var(--site-gap); margin: 0; padding: 0; list-style: none; }
.a-sec-testimonials--quotes .a-sec-testimonials__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.a-sec-quote {
  display: grid; gap: 12px; height: 100%; margin: 0; padding: 20px;
  background: var(--site-surface); border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius);
}
.a-sec-quote__text { margin: 0; font-size: 1.0625rem; line-height: 1.75; }
.a-sec-quote__text::before { content: "”"; display: block; height: .7em; color: var(--site-accent); font-family: var(--site-font-head); font-size: 3rem; line-height: 1; }
.a-sec-quote__who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.a-sec-quote__who .a-sec-avatar { --a-sec-avatar: 40px; }
.a-sec-quote__name { font-weight: 700; }
.a-sec-quote__detail { display: block; color: var(--site-muted); font-size: .875rem; }
/* whatsapp: chat bubbles on a soft panel, alternating sides. */
.a-sec-testimonials--whatsapp .a-sec-testimonials__list {
  max-width: 560px; margin-inline: auto; padding: 16px 12px; gap: 10px; background: var(--site-band); border-radius: var(--site-radius);
}
.a-sec-bubble {
  position: relative; width: fit-content; max-width: 88%; margin: 0; padding: 10px 14px 8px;
  background: var(--site-surface); border-radius: 16px; border-start-start-radius: 4px; box-shadow: var(--site-shadow);
}
.a-sec-bubble:nth-child(even) { margin-inline-start: auto; background: var(--site-primary-tint); border-start-start-radius: 16px; border-start-end-radius: 4px; }
.a-sec-bubble__name { display: block; color: var(--site-link); font-size: .875rem; font-weight: 700; }
.a-sec-bubble__text { margin: 2px 0 0; line-height: 1.7; }
.a-sec-bubble__detail { display: block; margin-top: 2px; color: var(--site-muted); font-size: .75rem; text-align: end; }

/* ---------- faq: accordion ---------- */
.a-sec-faq__list { display: grid; gap: 8px; max-width: 800px; margin: 0; padding: 0; list-style: none; }
.a-sec-faq__head { max-width: 800px; }
.a-sec-faq__item { background: var(--site-surface); border: var(--site-border) solid var(--site-line); border-radius: calc(var(--site-radius) * .7); }
.a-sec-faq__item > summary {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; list-style: none; cursor: pointer;
  font-weight: 700; line-height: 1.5; border-radius: inherit;
}
.a-sec-faq__item > summary::-webkit-details-marker { display: none; }
.a-sec-faq__item > summary::after {
  content: ""; flex: none; width: 24px; height: 24px; margin-inline-start: auto; border-radius: 50%; background: var(--site-link);
  -webkit-mask: var(--a-sec-plus) center / contain no-repeat; mask: var(--a-sec-plus) center / contain no-repeat; transition: transform .2s;
}
.a-sec-faq__item[open] > summary::after { transform: rotate(45deg); }
.a-sec-faq__answer { padding: 0 16px 16px; }
.a-sec-faq { --a-sec-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .a-sec-faq__item > summary::after { transition: none; } }

/* ---------- live: week (Saturday first; empty days fold away on phones) ---------- */
.a-sec-live__week { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.a-sec-day {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px;
  background: var(--site-surface); border: var(--site-border) solid var(--site-line); border-radius: calc(var(--site-radius) * .7);
}
.a-sec-day--empty { display: none; }
.a-sec-day--today { border-color: var(--site-link); box-shadow: inset -4px 0 0 var(--site-link); }
[dir="ltr"] .a-sec-day--today { box-shadow: inset 4px 0 0 var(--site-link); }
.a-sec-day__name { padding-top: 4px; font-weight: 700; }
.a-sec-day__slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.a-sec-slot { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 12px; border-radius: 12px; background: var(--site-link-tint); color: var(--site-ink); font-size: .9375rem; line-height: 1.5; }
.a-sec-slot__time { font-weight: 700; white-space: nowrap; }
.a-sec-live__hint { margin: 16px 0 0; color: var(--site-muted); font-size: .9375rem; }
@media (min-width: 900px) {
  .a-sec-live__week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .a-sec-day, .a-sec-day--empty { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 148px; }
  .a-sec-day--empty .a-sec-day__slots { color: var(--site-muted); font-size: .875rem; }
  .a-sec-day--today { box-shadow: inset 0 4px 0 var(--site-link); }
  .a-sec-slot { width: 100%; }
}

/* ---------- video: wide (a light poster; the YouTube frame loads only after a tap) ---------- */
.a-sec-video__frame {
  position: relative; display: block; width: 100%; max-width: 960px; margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--site-radius-img); background: var(--site-band);
}
.a-sec-video__frame img, .a-sec-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.a-sec-video__play {
  position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.a-sec-video__play-icon {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--site-primary); color: var(--site-on-primary); box-shadow: var(--site-shadow-raised); transition: transform .2s;
}
.a-sec-video__play:hover .a-sec-video__play-icon { transform: scale(1.06); }
.a-sec-video__play:focus-visible .a-sec-video__play-icon { outline: 3px solid var(--site-focus); outline-offset: 3px; }
.a-sec-video__caption { max-width: 960px; margin: 12px auto 0; color: var(--site-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .a-sec-video__play-icon { transition: none; } .a-sec-video__play:hover .a-sec-video__play-icon { transform: none; } }

/* ---------- cta: strip · card ---------- */
.a-sec-cta--strip { background: var(--site-primary); color: var(--site-on-primary); }
.a-sec-cta__row { display: grid; gap: 16px; justify-items: center; text-align: center; }
.a-sec-cta__title { margin: 0; font-family: var(--site-font-head); font-weight: var(--site-head-weight); line-height: var(--site-head-lh); font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); }
.a-sec-cta__line { margin: 4px 0 0; font-size: 1.0625rem; }
.a-sec-cta--strip .a-sec-cta__line { color: inherit; opacity: .92; }
.a-sec-cta--strip .a-site-btn--primary { background: var(--site-surface); border-color: var(--site-surface); color: var(--site-ink); }
.a-sec-cta--strip .a-site-btn--primary:hover { border-color: var(--site-on-primary); }
.a-sec-cta--strip :focus-visible { outline-color: var(--site-on-primary); }
@media (min-width: 768px) {
  .a-sec-cta--strip .a-sec-cta__row { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: start; align-items: center; }
}
.a-sec-cta--card .a-sec-cta__row {
  max-width: 640px; margin-inline: auto; padding: 28px 20px; background: var(--site-surface);
  border: var(--site-border) solid var(--site-line); border-top: 6px solid var(--site-accent); border-radius: var(--site-radius); box-shadow: var(--site-shadow);
}
.a-sec-cta--card .a-sec-cta__line { color: var(--site-muted); }

/* ---------- contact: cards (from «الهوية») ---------- */
.a-sec-contact__list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 0; padding: 0; list-style: none; }
.a-sec-contact__card {
  position: relative; display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px;
  background: var(--site-surface); border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius);
}
.a-sec-contact__card--whatsapp { grid-column: 1 / -1; flex-wrap: wrap; }
.a-sec-contact__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--site-link-tint); color: var(--site-ink); }
.a-sec-contact__card--whatsapp .a-sec-contact__icon { color: var(--site-success); }
.a-sec-contact__body { display: grid; flex: 1 1 10rem; min-width: 0; }
.a-sec-contact__label { color: var(--site-muted); font-size: .875rem; }
.a-sec-contact__value { font-weight: 700; overflow-wrap: anywhere; }
.a-sec-contact__link { color: var(--site-ink); text-decoration: none; }
.a-sec-contact__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.a-sec-contact__card:focus-within { outline: 3px solid var(--site-focus); outline-offset: 2px; }
.a-sec-contact__link:focus-visible { outline: none; }
.a-sec-contact__card .a-site-btn { position: relative; z-index: 1; }
@media (max-width: 559px) { .a-sec-contact__card--whatsapp .a-site-btn { width: 100%; } }

/* ---------- text: plain ---------- */
.a-sec-text__body { max-width: 72ch; }

/* ======================================================================================================
   Editor preview only (p5's preview mode + preview-bridge.js). Never rendered on a public page.
   ====================================================================================================== */

/* «مثال، مش هيظهر لطلابك» + «حط الحقيقي» on a sample section (plan §3.3). */
.a-sec-sample { outline: 2px dashed var(--site-sample-stripe); outline-offset: -2px; }
.a-sec-sample__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin: 0; padding: 6px 12px;
  color: var(--site-ink); font-size: .875rem; font-weight: 700; line-height: 1.5;
  background: repeating-linear-gradient(-45deg, var(--site-sample) 0 10px, var(--site-sample-stripe) 10px 20px);
}
/* One sample item inside a real list (sample_scope "item"). */
.a-sec-sample-item { position: relative; outline: 2px dashed var(--site-sample-stripe); outline-offset: 2px; }
.a-sec-sample-item__tag {
  position: absolute; top: -10px; inset-inline-end: 10px; z-index: 1; padding: 0 8px; border-radius: 999px;
  color: var(--site-ink); font-size: .75rem; font-weight: 700; line-height: 1.6;
  background: repeating-linear-gradient(-45deg, var(--site-sample) 0 6px, var(--site-sample-stripe) 6px 12px);
}
/* The tools: a dark chip with a light ring reads on every palette, light or dark. */
.a-sec-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 4px 14px;
  border: 0; border-radius: 999px; background: var(--site-tool); color: var(--site-on-tool); box-shadow: 0 0 0 2px var(--site-on-tool);
  font: inherit; font-size: .875rem; font-weight: 700; line-height: 1.3; text-decoration: none; cursor: pointer;
}
.a-sec-tool:focus-visible { outline: 3px solid var(--site-tool-ring); outline-offset: 2px; }
@media (pointer: coarse) { .a-sec-tool { min-height: 44px; } }
/* «عدّل» on every section: on hover/focus with a mouse, always on touch screens. */
.a-sec-edit { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 6; opacity: 0; transition: opacity .2s; }
.a-sec:hover > .a-sec-edit, .a-sec:focus-within > .a-sec-edit, .a-sec-edit:focus-visible { opacity: 1; }
@media (hover: none) { .a-sec-edit { opacity: 1; } }
.a-sec.is-editing { outline: 3px solid var(--site-tool-ring); outline-offset: -3px; }
.a-sec.is-editing > .a-sec-edit { opacity: 1; background: var(--site-tool-ring); color: var(--site-tool); }
/* A section the teacher hid: a thin dashed bar in its place, so it can still be found and shown. */
.a-sec-hidden {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 8px var(--site-gutter); padding: 10px 14px;
  color: var(--site-muted); font-size: .875rem; border: 2px dashed var(--site-line); border-radius: 14px;
}
/* Why a visible section doesn't reach students yet (sections.preview.notes.*), with the fix. */
.a-sec-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: var(--site-max); margin: 0 auto 16px;
  padding: 10px 14px; background: var(--site-link-tint); color: var(--site-ink); border-radius: 12px; font-size: .875rem; line-height: 1.6;
}
.a-sec-note__text { flex: 1 1 14rem; margin: 0; }
/* The grey «صورتك هنا» shape in previews when there is no photo yet (plan §3.3). */
.a-sec-photo-slot {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; text-align: center;
  background: var(--site-band); color: var(--site-muted); border: 2px dashed var(--site-line); border-radius: inherit;
  font-size: .8125rem; font-weight: 600; line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) { .a-sec-edit { transition: none; } }
@media print { .a-sec-edit, .a-sec-note, .a-sec-hidden, .a-sec-sample__bar { display: none !important; } }

/* ---------- Engine hooks (p5) ---------- */
/* A course without a picture: the look paints this 16:9 box (d3 CONTRACT-looks §4); here only a calm fallback. */
.a-sec-course__cover--art { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--site-primary-tint); }
.a-sec-course__cover--art[data-tone="2"] { background: var(--site-link-tint); }
.a-sec-course__cover--art[data-tone="3"] { background: var(--site-band); }
/* A look's inline hero decoration (d4 R-d2-4): decorative only, never in the way of a tap. */
.a-sec__deco { pointer-events: none; }
.a-sec__deco svg { display: block; width: 100%; max-width: 280px; height: auto; }
.a-sec-slot .a-site-muted { display: block; }