/* «منصّتي» as a plan (a-plat-*): the card on /pricing and «اختار باقتك», the card at the top of «حسابي», the checkout
   lines, «وصلنا التحويل ✓», «اشتراك منصّتي», the student-facing state pages on academy hosts, and the /report forms.
   Built on tokens.css + ui.css (load them first); layout and plan-specific looks only, no colour outside the tokens.
   On hessety.com these pages keep site.css for the header and footer; the kit classes don't collide with it.
   State pages run on academy hosts but must show nothing of the teacher's: they use neutrals only (no palette slot),
   so a teacher's /theme.css can't colour them. Spec: build/design/d8/spec.md §B. */

/* ---------- /pricing and the plans page: «منصّتي» on its own, beside Basic and Pro ---------- */
.a-plat-pricecard {
  position: relative; display: grid; gap: var(--a-space-4); margin-top: var(--a-space-5); padding: var(--a-space-5);
  background: var(--a-board); color: var(--a-on-board); border-radius: var(--a-radius-card); overflow: hidden;
}
.a-plat-pricecard::after {
  content: ""; position: absolute; inset-block-start: 18px; inset-inline-end: 18px; width: 62px; height: 37px; background: var(--a-chalk); opacity: .9;
  -webkit-mask: var(--a-ui-shadda) center / contain no-repeat; mask: var(--a-ui-shadda) center / contain no-repeat;
}
.a-plat-pricecard__head { display: grid; gap: var(--a-space-2); padding-inline-end: 72px; }
.a-plat-pricecard__title { margin: 0; font-family: var(--a-font-display); font-size: var(--a-text-h1); line-height: var(--a-lh-h1); font-weight: var(--a-weight-bold); }
.a-plat-pricecard__line { margin: 0; font-size: var(--a-text-lead); line-height: 1.6; color: var(--a-chalk); font-weight: var(--a-weight-semibold); }
.a-plat-pricecard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-space-2); margin: 0; }
.a-plat-pricecard__amount { font-family: var(--a-font-display); font-size: var(--a-text-h1); font-weight: var(--a-weight-bold); font-variant-numeric: tabular-nums; }
.a-plat-pricecard__per { opacity: .85; }
.a-plat-pricecard__points { display: grid; gap: var(--a-space-2); margin: 0; padding: 0; list-style: none; }
.a-plat-pricecard__points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--a-space-2); align-items: start; line-height: 1.6; }
.a-plat-pricecard__points svg { margin-top: 3px; color: var(--a-chalk); }
.a-plat-pricecard__cta { display: grid; gap: var(--a-space-2); justify-items: start; }
.a-plat-pricecard__cta .a-ui-btn { width: 100%; }
.a-plat-pricecard__badge { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; padding: 1px 10px; border-radius: var(--a-radius-pill); background: var(--a-chalk); color: var(--a-board); font-size: .8125rem; font-weight: var(--a-weight-bold); }
@media (min-width: 768px) {
  .a-plat-pricecard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--a-space-6); padding: var(--a-space-6); }
  .a-plat-pricecard__head, .a-plat-pricecard__price { grid-column: 1; }
  .a-plat-pricecard__points { grid-column: 2; grid-row: 1 / span 3; }
  .a-plat-pricecard__cta { grid-column: 1; }
  .a-plat-pricecard__cta .a-ui-btn { width: auto; }
}

/* ---------- «حسابي»: the card at the top ---------- */
.a-plat-acard { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-space-3); align-items: center; }
.a-plat-acard__art { display: none; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--a-surface); color: var(--a-primary); }
.a-plat-acard__art--shadda::before {
  content: ""; width: 38px; height: 23px; background: var(--a-accent);
  -webkit-mask: var(--a-ui-shadda) center / contain no-repeat; mask: var(--a-ui-shadda) center / contain no-repeat;
}
.a-plat-acard__body { display: grid; gap: var(--a-space-1); min-width: 0; }
.a-plat-acard__title { margin: 0; font-family: var(--a-font-display); font-size: var(--a-text-h3); line-height: 1.55; font-weight: var(--a-weight-bold); }
.a-plat-acard__line { margin: 0; color: var(--a-muted); line-height: 1.65; }
.a-plat-acard__progress { margin-top: var(--a-space-2); }
.a-plat-acard__actions { display: flex; flex-wrap: wrap; gap: var(--a-space-2); align-items: center; }
.a-plat-acard__actions .a-ui-btn { flex: 1 1 auto; }
@media (min-width: 560px) {
  .a-plat-acard { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--a-space-4); }
  .a-plat-acard__art { display: grid; }
  .a-plat-acard__actions .a-ui-btn { flex: none; }
}

/* ---------- Checkout: the lines added for «منصّتي» ---------- */
.a-plat-lines { display: grid; gap: var(--a-space-2); margin: 0; padding: 0; list-style: none; }
.a-plat-line { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--a-space-2); align-items: start; margin: 0; font-size: .9375rem; line-height: 1.65; }
.a-plat-line > svg { margin-top: 3px; color: var(--a-primary); }
.a-plat-line--credit > svg { color: var(--a-success); }
.a-plat-line strong, .a-plat-line bdi { font-weight: var(--a-weight-bold); }
/* Switching away from «منصّتي»: a warning that asks, with the two answers right under it. */
.a-plat-switch { display: grid; gap: var(--a-space-3); }
.a-plat-switch__buttons { display: grid; gap: var(--a-space-2); }
@media (min-width: 560px) { .a-plat-switch__buttons { display: flex; flex-wrap: wrap; } }

/* ---------- checkout-return: «وصلنا التحويل ✓» ---------- */
.a-plat-received { display: grid; gap: var(--a-space-4); justify-items: center; text-align: center; }
.a-plat-received__mark { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--a-success-tint); color: var(--a-success); }
.a-plat-received__mark::after {
  content: ""; position: absolute; inset-block-start: -6px; inset-inline-end: -14px; width: 34px; height: 20px; background: var(--a-accent);
  -webkit-mask: var(--a-ui-shadda) center / contain no-repeat; mask: var(--a-ui-shadda) center / contain no-repeat;
}
.a-plat-received__title { margin: 0; }
.a-plat-received__text { margin: 0; font-size: var(--a-text-lead); line-height: 1.65; max-width: 30rem; }
.a-plat-received__list { display: grid; gap: var(--a-space-2); width: 100%; margin: 0; padding: var(--a-space-4); list-style: none; text-align: start; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 16px; }
.a-plat-received__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--a-space-2); align-items: start; line-height: 1.6; }
.a-plat-received__list svg { margin-top: 3px; color: var(--a-primary); }
.a-plat-received__actions { display: grid; gap: var(--a-space-1); justify-items: center; width: 100%; }
.a-plat-received__actions .a-ui-btn { width: 100%; }
@media (min-width: 560px) { .a-plat-received__actions .a-ui-btn { width: auto; min-width: 240px; } }

/* ---------- /account/academy/plan: «اشتراك منصّتي» ---------- */
.a-plat-plan { display: grid; gap: var(--a-space-5); padding-block: var(--a-space-5) var(--a-space-7); }
.a-plat-plan__status { display: grid; gap: var(--a-space-2); }
.a-plat-plan__state { margin: 0; font-size: var(--a-text-lead); font-weight: var(--a-weight-semibold); line-height: 1.6; }
.a-plat-plan__days { font-family: var(--a-font-display); font-size: var(--a-text-h2); font-weight: var(--a-weight-bold); font-variant-numeric: tabular-nums; }
.a-plat-plan__includes { display: grid; gap: var(--a-space-2); margin: 0; padding: 0; list-style: none; }
.a-plat-plan__includes li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--a-space-2); align-items: start; line-height: 1.6; }
.a-plat-plan__includes svg { margin-top: 3px; color: var(--a-success); }
.a-plat-plan__actions { display: grid; gap: var(--a-space-2); }
.a-plat-plan__actions .a-ui-btn { width: 100%; }
@media (min-width: 560px) {
  .a-plat-plan__actions { display: flex; flex-wrap: wrap; align-items: center; }
  .a-plat-plan__actions .a-ui-btn { width: auto; }
}
@media (min-width: 1024px) { .a-plat-plan { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; } .a-plat-plan > .a-plat-plan__wide { grid-column: 1 / -1; } }
/* «لو أكاديميتك وقفت»: what happens, in order, as a short vertical line of steps. */
.a-plat-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.a-plat-timeline__step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--a-space-3); padding-bottom: var(--a-space-4); line-height: 1.6; }
.a-plat-timeline__step::before { content: ""; grid-row: 1; width: 12px; height: 12px; margin: 6px auto 0; border-radius: 50%; background: var(--a-surface); border: 2px solid var(--a-primary); }
.a-plat-timeline__step:not(:last-child)::after { content: ""; position: absolute; inset-block: 22px 0; inset-inline-start: 11px; width: 2px; background: var(--a-line); }
.a-plat-timeline__step:last-child { padding-bottom: 0; }

/* ---------- Academy hosts: the state pages students see (draft, lapsed, suspended, closed, unavailable) ---------- */
.a-plat-state { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 100dvh; background: var(--a-paper); color: var(--a-ink); }
.a-plat-state__main { display: grid; place-items: center; padding: var(--a-space-7) var(--a-gutter); }
.a-plat-state__card { display: grid; gap: var(--a-space-3); justify-items: center; width: min(100%, 420px); text-align: center; }
.a-plat-state__art { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--a-space-2); border-radius: 22px; background: var(--a-surface); border: 1px solid var(--a-line); color: var(--a-muted); }
.a-plat-state__art--wait::before {
  content: ""; width: 42px; height: 25px; background: var(--a-accent);
  -webkit-mask: var(--a-ui-shadda) center / contain no-repeat; mask: var(--a-ui-shadda) center / contain no-repeat;
}
.a-plat-state__title { margin: 0; font-family: var(--a-font-display); font-size: var(--a-text-h2); line-height: var(--a-lh-h2); font-weight: var(--a-weight-bold); text-wrap: balance; }
.a-plat-state__text { margin: 0; color: var(--a-muted); line-height: 1.7; }
.a-plat-state__actions { display: grid; gap: var(--a-space-2); width: 100%; margin-top: var(--a-space-2); }
@media (min-width: 560px) { .a-plat-state__actions { display: flex; justify-content: center; } }
@media (prefers-reduced-motion: no-preference) {
  .a-plat-state__art--wait::before { animation: a-ui-bob .9s ease-in-out infinite alternate; }
}
/* «واقفة مؤقتًا» keeps the academy's own header and footer (it's the teacher's academy, not a violation): the card
   sits inside its layout, so only the card rules apply there. */
.a-plat-state-inline { padding: var(--a-space-7) var(--a-gutter); display: grid; place-items: center; }

/* ---------- hessety.com/report and /report/copyright ---------- */
.a-plat-report { display: grid; gap: var(--a-space-5); width: 100%; max-width: calc(var(--a-content) + 2 * var(--a-gutter)); margin-inline: auto; padding: var(--a-space-6) var(--a-gutter) var(--a-space-7); }
.a-plat-report__head { display: grid; gap: var(--a-space-2); }
.a-plat-report__form { display: grid; gap: var(--a-space-5); }
.a-plat-report__notes { display: grid; gap: var(--a-space-2); }
.a-plat-report__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.a-plat-report__done { display: grid; gap: var(--a-space-3); justify-items: center; text-align: center; padding-block: var(--a-space-6); }
.a-plat-received__mark--plain::after { display: none; }

/* The state pages' own header (lapsed only: the academy's name, the way in) and the «بتشتغل بـ حصّتي» line under
   every state page. Neutral tokens only. */
.a-plat-state { display: flex; flex-direction: column; }
.a-plat-state > .a-plat-state__main { flex: 1 1 auto; }
.a-plat-state__header { display: flex; align-items: center; justify-content: space-between; gap: var(--a-space-3); padding: var(--a-space-3) var(--a-gutter); border-bottom: 1px solid var(--a-line); background: var(--a-surface); }
.a-plat-state__brand { font-weight: var(--a-weight-bold); font-size: var(--a-text-lead); overflow-wrap: anywhere; }
.a-plat-state__powered { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-space-2) var(--a-space-4); padding: var(--a-space-4) var(--a-gutter); border-top: 1px solid var(--a-line); color: var(--a-muted); font-size: var(--a-text-small); }
.a-plat-state__powered a { color: var(--a-muted); }