/* «منصّتي» public academy site: page chrome, buttons, course pages, legal pages, install banner, in-app bar (a-site-*).
   Reads ONLY the --site-* variables that p5's /theme.css emits per academy (palette, fonts, shape, space; list in
   <build>/design/d2/spec.md §5), so a look restyles it through variables and its own looks/<key>.css. No hex codes here.
   Load order on an academy host: tokens.css, ui.css (system pages), /theme.css, site.css, sections.css, looks/<key>.css.
   Mobile first (360px, safe at 320px), RTL with logical properties, no inline styles (CSP). */

/* ---------- Base ---------- */
.a-site {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--site-bg); color: var(--site-ink);
  font-family: var(--site-font-body); font-size: var(--site-body-size); line-height: var(--site-body-lh);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-wrap: break-word;
}
.a-site *, .a-site *::before, .a-site *::after { box-sizing: border-box; }
.a-site [hidden] { display: none !important; }
.a-site img, .a-site svg { max-width: 100%; }
.a-site img { height: auto; }
:where(.a-site) a { color: var(--site-link); text-underline-offset: .2em; }
.a-site :focus-visible { outline: 3px solid var(--site-focus); outline-offset: 2px; }
.a-site-main { flex: 1 0 auto; display: block; }
.a-site-wrap { width: 100%; max-width: var(--site-max); margin-inline: auto; padding-inline: max(var(--site-gutter), env(safe-area-inset-left)); }
.a-site-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.a-site-ltr { direction: ltr; unicode-bidi: isolate; }
.a-site-icon { width: 20px; height: 20px; flex: none; }
.a-site-skip {
  position: absolute; inset-inline-start: 8px; top: -120px; z-index: 60; padding: 10px 16px; border-radius: var(--site-radius-btn);
  background: var(--site-tool); color: var(--site-on-tool); font-weight: 700; text-decoration: none;
}
.a-site-skip:focus { top: 8px; }

/* Headings shared by pages (sections have their own in sections.css). */
.a-site-h1 {
  margin: 0; font-family: var(--site-font-head); font-weight: var(--site-head-weight); line-height: var(--site-head-lh);
  font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem); text-wrap: balance;
}
.a-site-h2 { margin: 0; font-family: var(--site-font-head); font-weight: var(--site-head-weight); line-height: var(--site-head-lh); font-size: 1.25rem; }
.a-site-lead { margin: 0; max-width: 60ch; color: var(--site-muted); font-size: 1.0625rem; }
.a-site-muted { color: var(--site-muted); }
.a-site-small { font-size: .875rem; line-height: 1.6; }
.a-site-pagehead { display: grid; gap: 8px; padding-block: 28px 4px; }

/* ---------- Buttons (the academy's own; system pages use the kit's .a-ui-btn) ---------- */
.a-site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px;
  border: 2px solid transparent; border-radius: var(--site-radius-btn); background: none; color: inherit;
  font: inherit; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .12s;
}
.a-site-btn:active { transform: translateY(1px); }
.a-site-btn--primary { background: var(--site-primary); border-color: var(--site-primary); color: var(--site-on-primary); }
.a-site-btn--primary:hover { border-color: var(--site-ink); }
.a-site-btn--outline, .a-site-btn--whatsapp { background: var(--site-surface); border-color: var(--site-line); color: var(--site-ink); }
.a-site-btn--outline:hover, .a-site-btn--whatsapp:hover { border-color: var(--site-outline); }
.a-site-btn--whatsapp .a-site-icon { color: var(--site-success); }
.a-site-btn--quiet { min-height: 44px; padding-inline: 12px; color: var(--site-link); font-weight: 600; }
.a-site-btn--quiet:hover { text-decoration: underline; }
.a-site-btn--sm { min-height: 40px; padding: 6px 14px; font-size: .9375rem; }
.a-site-btn--lg { min-height: 56px; padding-inline: 28px; font-size: 1.0625rem; }
.a-site-btn--block { display: flex; width: 100%; }
@media (pointer: coarse) { .a-site-btn--sm { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .a-site-btn { transition: none; } .a-site-btn:active { transform: none; } }

.a-site-iconbtn {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 12px; background: transparent; color: var(--site-ink); cursor: pointer;
}
.a-site-iconbtn:hover { background: var(--site-band); }

/* A small label («مجاني»، «درس مجاني للمعاينة»). Ink on a tint passes AA in every palette. */
.a-site-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
  background: var(--site-link-tint); color: var(--site-ink); font-size: .8125rem; font-weight: 700; line-height: 1.7; white-space: nowrap;
}
.a-site-chip--free { background: var(--site-primary-tint); }
.a-site-chip--live { background: var(--site-accent); color: var(--site-on-accent); }

/* ---------- Header ---------- */
.a-site-header { position: sticky; top: 0; z-index: 30; background: var(--site-surface); border-bottom: var(--site-border) solid var(--site-line); }
.a-site-header__bar { display: flex; align-items: center; gap: 8px; min-height: 60px; }
.a-site-brand {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; margin-inline-end: auto;
  color: var(--site-ink); text-decoration: none; font-family: var(--site-font-head); font-weight: var(--site-head-weight);
  font-size: 1.0625rem; line-height: 1.35;
}
.a-site-brand:hover .a-site-brand__name { text-decoration: underline; text-underline-offset: .2em; }
.a-site-brand__name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.a-site-logo { display: block; flex: none; width: auto; height: 40px; max-width: 128px; object-fit: contain; }
.a-site-logo--square { width: 40px; border-radius: 10px; object-fit: cover; }
/* A dark logo gets a light plate in night mode (plan §2.3, screen 3.2). */
:root[data-theme="dark"] .a-site-logo--plate { padding: 4px; border-radius: 10px; background: var(--site-plate); }
.a-site-header__tools { display: flex; align-items: center; gap: 2px; flex: none; }
.a-site-auth { display: none; }
.a-site-theme-btn .a-site-icon--sun { display: none; }
:root[data-theme="dark"] .a-site-theme-btn .a-site-icon--sun { display: block; }
:root[data-theme="dark"] .a-site-theme-btn .a-site-icon--moon { display: none; }

/* The menu: open by default (works without JS); site.js sets data-menu="closed" on phones and toggles it. */
.a-site-header[data-menu="closed"] .a-site-nav { display: none; }
.a-site-nav { border-top: 1px solid var(--site-line); }
.a-site-nav__list { display: grid; gap: 2px; margin: 0; padding: 8px 0 12px; list-style: none; }
.a-site-nav__link {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 12px; border-radius: 12px;
  color: var(--site-ink); font-weight: 600; text-decoration: none;
}
.a-site-nav__link:hover { background: var(--site-band); }
.a-site-nav__link[aria-current="page"] { background: var(--site-primary-tint); box-shadow: inset -4px 0 0 var(--site-link); }
[dir="ltr"] .a-site-nav__link[aria-current="page"] { box-shadow: inset 4px 0 0 var(--site-link); }
.a-site-nav__auth { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--site-line); }
.a-site-nav__auth .a-site-btn { width: 100%; }

@media (min-width: 900px) {
  .a-site-header__bar { min-height: 68px; gap: 16px; }
  .a-site-brand { margin-inline-end: 0; font-size: 1.125rem; }
  .a-site-header[data-menu] .a-site-nav { display: block; flex: 1 1 auto; border: 0; }
  .a-site-nav__list { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; }
  .a-site-nav__link { min-height: 44px; }
  .a-site-nav__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--site-link); border-radius: 12px 12px 4px 4px; }
  .a-site-nav__auth, .a-site-menu-btn { display: none; }
  .a-site-auth { display: inline-flex; }
}

/* ---------- Calm bars on top: the browser inside Facebook/TikTok, and the looks frame ---------- */
.a-site-inapp { background: var(--site-link-tint); color: var(--site-ink); border-bottom: 1px solid var(--site-line); }
.a-site-inapp__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 10px; }
.a-site-inapp__text { flex: 1 1 16rem; margin: 0; font-size: .9375rem; line-height: 1.6; }
.a-site-inapp__how { display: block; font-weight: 700; }
.a-site-inapp__actions { display: flex; flex-wrap: wrap; gap: 4px 8px; }
/* «معاينة ببيانات متخيّلة»: one stripe on the frame of a looks page instead of a stripe on every section (plan §3.8). */
.a-site-frame-stripe {
  position: sticky; top: 0; z-index: 35; margin: 0; padding: 6px 12px; text-align: center;
  font-size: .875rem; font-weight: 700; color: var(--site-ink);
  background: repeating-linear-gradient(-45deg, var(--site-sample) 0 10px, var(--site-sample-stripe) 10px 20px);
}

/* ---------- Footer and the fixed «بتشتغل بـ حصّتي» bar ---------- */
.a-site-footer { padding-block: 32px 20px; background: var(--site-band); border-top: var(--site-border) solid var(--site-line); }
.a-site-footer__grid { display: grid; gap: 24px; }
.a-site-footer__name { margin: 0 0 6px; font-family: var(--site-font-head); font-weight: var(--site-head-weight); font-size: 1.125rem; line-height: 1.4; }
.a-site-footer__title { margin: 0 0 4px; color: var(--site-muted); font-size: .875rem; font-weight: 700; }
.a-site-footer__links { display: grid; margin: 0; padding: 0; list-style: none; }
.a-site-footer__links a { display: flex; align-items: center; min-height: 44px; color: var(--site-ink); text-decoration: none; }
.a-site-footer__links a:hover { text-decoration: underline; }
.a-site-footer__copy { margin: 24px 0 0; color: var(--site-muted); font-size: .875rem; }
.a-site-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.a-site-social a {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--site-line); border-radius: 50%;
  background: var(--site-surface); color: var(--site-ink);
}
.a-site-social a:hover { border-color: var(--site-outline); }
@media (min-width: 768px) { .a-site-footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* Neutral, never in the academy's colours (plan §3.7): 56px, wordmark 96px, report link beside it. */
.a-site-powered { background: var(--site-powered-bg); color: var(--site-powered-ink); border-top: 1px solid var(--site-powered-line); }
.a-site-powered__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px; min-height: 56px;
  padding-block: 6px max(6px, env(safe-area-inset-bottom)); font-size: .875rem; line-height: 1.4;
}
.a-site-powered__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: inherit; text-decoration: none; }
.a-site-powered__mark { display: block; width: 96px; height: auto; }
.a-site-powered__mark--dark, :root[data-theme="dark"] .a-site-powered__mark--light { display: none; }
:root[data-theme="dark"] .a-site-powered__mark--dark { display: block; }
.a-site-powered__report { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: .8125rem; text-decoration: underline; }
.a-site-powered a:focus-visible { outline-color: var(--site-powered-ink); }
/* In the editor preview the bar carries a small lock; tapping it explains (sections.preview.footer_locked). */
.a-site-powered__lock {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 10px; border: 0; border-radius: 999px;
  background: var(--site-tool); color: var(--site-on-tool); font: inherit; font-size: .75rem; font-weight: 700; cursor: help;
}

/* ---------- Courses page and the «الكورسات جاية قريب» card ---------- */
.a-site-courses { padding-block: 8px 48px; }
.a-site-soon {
  display: grid; justify-items: center; gap: 8px; padding: 32px 20px; text-align: center;
  background: var(--site-surface); border: 2px dashed var(--site-line); border-radius: var(--site-radius);
}
.a-site-soon__art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--site-primary-tint); color: var(--site-ink); }
.a-site-soon__title { margin: 0; font-family: var(--site-font-head); font-weight: var(--site-head-weight); font-size: 1.25rem; line-height: 1.5; }
.a-site-soon__text { margin: 0 0 8px; color: var(--site-muted); }

/* ---------- Course page (/courses/{slug}) ---------- */
.a-site-course { display: grid; gap: 24px; padding-block: 12px 32px; }
.a-site-course__back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; text-decoration: none; }
.a-site-course__cover {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--site-radius-img); background: var(--site-band);
}
.a-site-course__head { display: grid; gap: 8px; }
.a-site-course__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--site-muted); font-size: .9375rem; }
.a-site-course__meta li { display: inline-flex; align-items: center; gap: 6px; }
.a-site-course__main { display: grid; gap: 28px; min-width: 0; }
.a-site-course__block { display: grid; gap: 12px; }
/* The price box: in the flow on phones, sticky beside the content from 900px. */
.a-site-buy {
  display: grid; gap: 12px; padding: 20px; background: var(--site-surface);
  border: var(--site-border) solid var(--site-line); border-radius: var(--site-radius); box-shadow: var(--site-shadow);
}
.a-site-price { margin: 0; font-family: var(--site-font-head); font-weight: var(--site-head-weight); font-size: 1.75rem; line-height: 1.3; }
.a-site-price__free { color: var(--site-ink); }
.a-site-buy__note { margin: 0; color: var(--site-muted); font-size: .875rem; line-height: 1.6; }
.a-site-buy__code { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--site-line); font-size: .9375rem; }
/* The same button again at the bottom of the screen on phones once the box has scrolled away. */
.a-site-buybar {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  margin-top: 8px; padding: 10px var(--site-gutter) max(10px, env(safe-area-inset-bottom));
  background: var(--site-surface); border-top: 1px solid var(--site-line); box-shadow: var(--site-shadow-raised);
}
.a-site-buybar__price { flex: none; font-family: var(--site-font-head); font-weight: var(--site-head-weight); font-size: 1.125rem; }
.a-site-buybar .a-site-btn { flex: 1 1 auto; }
@media (min-width: 900px) {
  .a-site-course { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; column-gap: 40px; }
  .a-site-course__aside { position: sticky; top: 88px; }
  .a-site-buybar { display: none; }
}

/* «هتتعلم إيه»: short lines with a tick. */
.a-site-learn { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.a-site-learn li { position: relative; padding-inline-start: 30px; line-height: 1.6; }
.a-site-learn li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--site-success);
  -webkit-mask: var(--a-site-tick) center / contain no-repeat;
  mask: var(--a-site-tick) center / contain no-repeat;
}
/* A filled circle with the tick cut out (evenodd), coloured by the background it masks. */
.a-site { --a-site-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22zM10.3 16.4L6.3 12.4L7.9 10.8L10.3 13.2L16.1 7.4L17.7 9Z'/%3E%3C/svg%3E"); }

/* «محتوى الكورس»: one <details> per part, a row per lesson. */
.a-site-outline { display: grid; gap: 10px; }
.a-site-outline__part { background: var(--site-surface); border: var(--site-border) solid var(--site-line); border-radius: calc(var(--site-radius) * .7); overflow: hidden; }
.a-site-outline__part > summary {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 16px; list-style: none; cursor: pointer; font-weight: 700;
}
.a-site-outline__part > summary::-webkit-details-marker { display: none; }
.a-site-outline__part > summary::after {
  content: ""; flex: none; width: 18px; height: 18px; margin-inline-start: auto; background: var(--site-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s;
}
.a-site-outline__part[open] > summary::after { transform: rotate(180deg); }
.a-site-outline__count { color: var(--site-muted); font-size: .875rem; font-weight: 400; white-space: nowrap; }
.a-site-outline__lessons { margin: 0; padding: 0; list-style: none; }
.a-site-lesson { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--site-line); }
.a-site-lesson__kind { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--site-band); color: var(--site-muted); }
.a-site-lesson__title { flex: 1 1 10rem; min-width: 0; line-height: 1.5; }
.a-site-lesson__end { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; color: var(--site-muted); font-size: .875rem; }
.a-site-lesson--preview .a-site-lesson__kind { background: var(--site-primary-tint); color: var(--site-ink); }

/* ---------- Text pages and markdown (legal pages, «عني», free text, FAQ answers) ---------- */
.a-site-prose { max-width: 72ch; line-height: var(--site-body-lh); }
.a-site-prose > :first-child { margin-top: 0; }
.a-site-prose > :last-child { margin-bottom: 0; }
.a-site-prose p, .a-site-prose ul, .a-site-prose ol { margin: 0 0 1em; }
.a-site-prose ul, .a-site-prose ol { padding-inline-start: 1.4em; }
.a-site-prose li { margin-bottom: .35em; }
.a-site-prose li::marker { color: var(--site-link); }
.a-site-prose strong { font-weight: 700; }
.a-site-prose h2, .a-site-prose h3 { margin: 1.6em 0 .5em; font-family: var(--site-font-head); font-weight: var(--site-head-weight); line-height: var(--site-head-lh); }
.a-site-prose h2 { font-size: 1.375rem; }
.a-site-prose h3 { font-size: 1.125rem; }
.a-site-legal { padding-block: 8px 48px; }
.a-site-legal__updated { margin: 0; color: var(--site-muted); font-size: .875rem; }
/* The fixed block on /terms /privacy /refund (plan §3.6). */
.a-site-fixed {
  margin: 0 0 1.5em; padding: 16px 18px; background: var(--site-band); border-radius: calc(var(--site-radius) * .6);
  border-inline-start: 4px solid var(--site-link);
}
.a-site-fixed__label { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--site-muted); font-size: .8125rem; font-weight: 700; }

/* ---------- Install banner (site.js; plan §2.13.8): a card at the bottom, never a blocking screen ---------- */
.a-site-install {
  position: fixed; inset-inline: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 40; max-width: 480px; margin-inline: auto;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px; padding-inline-end: 6px;
  background: var(--site-surface); color: var(--site-ink); border: 1px solid var(--site-line); border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-raised);
}
.a-site-install__icon { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--site-band); }
.a-site-install__body { display: grid; gap: 4px; min-width: 0; }
.a-site-install__title { margin: 0; font-weight: 700; line-height: 1.45; }
.a-site-install__text { margin: 0; color: var(--site-muted); font-size: .875rem; line-height: 1.6; }
.a-site-install__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.a-site-install__close { align-self: start; margin-top: -8px; }
.a-site-install__steps { display: grid; gap: 6px; margin: 6px 0 0; padding: 10px 12px; padding-inline-start: 28px; background: var(--site-band); border-radius: 12px; font-size: .875rem; line-height: 1.65; }
@media (prefers-reduced-motion: no-preference) {
  .a-site-install { animation: a-site-rise .32s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes a-site-rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Print ---------- */
@media print {
  .a-site-header, .a-site-install, .a-site-inapp, .a-site-buybar, .a-site-frame-stripe { display: none !important; }
}

/* ---------- Engine hooks (p5) ---------- */
/* The brand without a logo: the teacher's initials on the palette's main colour. */
.a-site-logo--initials {
  display: grid; place-items: center; height: 40px; background: var(--site-primary); color: var(--site-on-primary);
  font-family: var(--site-font-head); font-weight: 700; font-size: 1rem; line-height: 1;
}
.a-site-course__cover.a-sec-course__cover--art { border-radius: var(--site-radius-img); }