/* «منصّتي» showroom (a-show-*): the landing page hessety.com/academy, the looks gallery hessety.com/academy/looks and
   its «جرّبه» page, the stripe on looks.hessety.com previews, and the demo academies' bar and read-only panel.
   Built on tokens.css + ui.css (load them first); only layout and showroom looks here, no colour outside the tokens.
   Mobile-first (360px, safe at 320px), RTL with logical properties. Spec: build/design/d8/spec.md §A.
   Values that come from data (a palette's swatch colour, the desktop preview's scale) are set by showroom.js with
   the CSSOM (--a-show-swatch, --a-show-scale): no inline styles (CSP). */

/* ---------- Page frame ---------- */
.a-show { background: var(--a-paper); color: var(--a-ink); }
.a-show-section { padding-block: var(--a-space-7); }
.a-show-section + .a-show-section { padding-top: 0; }
.a-show-section__head { display: grid; gap: var(--a-space-2); margin-bottom: var(--a-space-5); max-width: var(--a-measure); }
.a-show-section__head--center { margin-inline: auto; text-align: center; justify-items: center; }
.a-show-eyebrow {
  display: inline-flex; align-items: center; gap: var(--a-space-2); justify-self: start; min-height: 28px; padding: 2px 12px;
  border-radius: var(--a-radius-pill); background: var(--a-accent-tint); color: var(--a-ink);
  font-size: var(--a-text-small); font-weight: var(--a-weight-semibold);
}
.a-show-eyebrow::before {
  content: ""; flex: none; width: 20px; height: 12px; background: var(--a-accent);
  -webkit-mask: var(--a-ui-shadda) center / contain no-repeat; mask: var(--a-ui-shadda) center / contain no-repeat;
}

/* ---------- Landing: hero ---------- */
.a-show-hero { padding-block: var(--a-space-6) var(--a-space-7); }
.a-show-hero__grid { display: grid; gap: var(--a-space-6); align-items: center; }
.a-show-hero__text { display: grid; gap: var(--a-space-4); min-width: 0; }
.a-show-hero__lead { margin: 0; font-size: var(--a-text-lead); line-height: 1.7; color: var(--a-muted); max-width: 34rem; }
.a-show-hero__cta { display: grid; gap: var(--a-space-2); justify-items: start; margin-top: var(--a-space-2); }
.a-show-hero__cta .a-ui-btn { width: 100%; }
.a-show-hero__sub { margin: 0; font-size: var(--a-text-small); line-height: 1.6; color: var(--a-muted); max-width: 30rem; }
.a-show-hero__art { display: grid; justify-items: center; }
/* A link like mr-ahmed.hessety.com never breaks at its hyphen. */
.a-show-hero__lead bdi, .a-show-look__link bdi, .a-show-state bdi { white-space: nowrap; }
@media (min-width: 560px) { .a-show-hero__cta .a-ui-btn { width: auto; } }
@media (min-width: 1024px) {
  .a-show-hero { padding-block: var(--a-space-8); }
  .a-show-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--a-space-7); }
}

/* A phone outline around a live preview or a screenshot. */
.a-show-phone {
  position: relative; width: min(100%, 300px); aspect-ratio: 9 / 18.5; overflow: hidden;
  background: var(--a-surface); border: 8px solid var(--a-ink); border-radius: 36px; box-shadow: var(--a-shadow-2);
}
.a-show-phone::before {
  content: ""; position: absolute; z-index: 1; top: 6px; inset-inline: 0; width: 72px; height: 16px; margin-inline: auto;
  border-radius: var(--a-radius-pill); background: var(--a-ink);
}
.a-show-phone > iframe, .a-show-phone > img { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; object-position: top; }
.a-show-phone--sm { width: min(100%, 220px); border-width: 6px; border-radius: 28px; }
.a-show-phone--sm::before { width: 56px; height: 12px; top: 5px; }

/* ---------- Landing: four points ---------- */
.a-show-points { display: grid; gap: var(--a-space-3); margin: 0; padding: 0; list-style: none; }
.a-show-point { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-space-1) var(--a-space-3); align-items: start; }
.a-show-point__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--a-primary-tint); color: var(--a-primary); }
.a-show-point__title { margin: 0; font-weight: var(--a-weight-bold); line-height: 1.5; }
.a-show-point__text { margin: 0; font-size: var(--a-text-small); line-height: 1.6; color: var(--a-muted); }
@media (min-width: 768px) { .a-show-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-space-5); } }

/* ---------- Landing: price ---------- */
.a-show-price { display: grid; gap: var(--a-space-4); }
.a-show-price__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-space-2); }
.a-show-price__amount { font-family: var(--a-font-display); font-size: var(--a-text-display); line-height: 1.2; font-weight: var(--a-weight-bold); font-variant-numeric: tabular-nums; }
.a-show-price__per { color: var(--a-muted); font-weight: var(--a-weight-semibold); }
.a-show-price__line { margin: 0; font-size: var(--a-text-lead); line-height: 1.6; }
.a-show-price__options { display: grid; gap: var(--a-space-2); margin: 0; padding: 0; list-style: none; }
.a-show-price__option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--a-space-3);
  min-height: 56px; padding: 10px 16px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 16px;
}
.a-show-price__option-name { font-weight: var(--a-weight-bold); }
.a-show-price__option-monthly { grid-column: 1; font-size: var(--a-text-small); color: var(--a-muted); }
.a-show-price__option-total { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 2px; font-weight: var(--a-weight-bold); font-variant-numeric: tabular-nums; }
.a-show-price__notes { display: grid; gap: var(--a-space-2); }
.a-show-price .a-ui-btn--xl { width: 100%; }
@media (min-width: 768px) {
  .a-show-price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: var(--a-space-6); }
  .a-show-price__head, .a-show-price__cta { grid-column: 1; }
  .a-show-price__options { grid-column: 2; grid-row: 1 / span 3; }
  .a-show-price .a-ui-btn--xl { width: auto; }
}

/* ---------- Landing: «اتفرّج قبل ما تدفع» ---------- */
.a-show-try { display: grid; gap: var(--a-space-4); }
.a-show-try__card { display: grid; gap: var(--a-space-3); align-content: start; }
.a-show-try__title { margin: 0; font-family: var(--a-font-display); font-size: var(--a-text-h3); line-height: 1.5; font-weight: var(--a-weight-semibold); }
.a-show-try__text { margin: 0; color: var(--a-muted); line-height: 1.65; }
.a-show-try__strip { display: flex; gap: var(--a-space-2); overflow: hidden; margin-inline: -4px; padding: 4px; }
.a-show-try__thumb { flex: 0 0 72px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-surface-2); }
.a-show-try__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.a-show-try__links { display: flex; flex-wrap: wrap; gap: var(--a-space-2); }
@media (min-width: 1024px) { .a-show-try { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Three dashboard screenshots: a swipe row on phones, a row of three from 768px. */
.a-show-shots { display: grid; gap: var(--a-space-3); }
.a-show-shots__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 220px); gap: var(--a-space-4); margin: 0; padding: 4px 4px var(--a-space-3);
  list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.a-show-shots__item { display: grid; justify-items: center; gap: var(--a-space-2); scroll-snap-align: center; text-align: center; }
.a-show-shots__caption { margin: 0; font-size: var(--a-text-small); font-weight: var(--a-weight-semibold); line-height: 1.5; }
.a-show-shots__placeholder { display: grid; place-items: center; width: 100%; height: 100%; padding: var(--a-space-4); background: var(--a-surface-2); color: var(--a-muted); font-size: var(--a-text-small); text-align: center; }
@media (min-width: 768px) { .a-show-shots__list { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }

/* ---------- Landing: the closing band and the FAQ ---------- */
.a-show-band {
  display: grid; gap: var(--a-space-4); justify-items: center; padding: var(--a-space-6) var(--a-space-4); text-align: center;
  background: var(--a-board); color: var(--a-on-board); border-radius: var(--a-radius-sheet);
}
.a-show-band__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); text-wrap: balance; }
.a-show-band__marked { color: var(--a-chalk); }
.a-show-band__sub { margin: 0; max-width: 34rem; font-size: var(--a-text-small); line-height: 1.6; opacity: .9; }
.a-show-faq { display: grid; gap: var(--a-space-2); max-width: var(--a-content); margin-inline: auto; }
.a-show-faq__answer { margin: 0; line-height: 1.75; }

/* Phones: once the hero's button is off screen, a bar with the price and the button stays at the bottom.
   showroom.js removes [hidden]; nothing sticks from 1024px. */
.a-show-stickycta {
  position: sticky; bottom: 0; z-index: var(--a-z-bar); display: flex; align-items: center; gap: var(--a-space-3);
  padding: 10px var(--a-gutter) max(10px, env(safe-area-inset-bottom)); background: var(--a-surface); border-top: 1px solid var(--a-line); box-shadow: var(--a-shadow-2);
}
.a-show-stickycta__price { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: var(--a-weight-bold); font-variant-numeric: tabular-nums; line-height: 1.3; }
.a-show-stickycta .a-ui-btn { flex: none; }
@media (min-width: 1024px) { .a-show-stickycta { display: none; } }

/* ---------- Landing and gallery: sales closed, invited, already subscribed ---------- */
.a-show-state { display: grid; gap: var(--a-space-3); justify-items: start; }
.a-show-state .a-ui-btn { width: 100%; }
@media (min-width: 560px) { .a-show-state .a-ui-btn { width: auto; } }

/* ---------- Gallery: the name box and the filters (sticky under the site header) ---------- */
.a-show-gallery-head { display: grid; gap: var(--a-space-3); padding-block: var(--a-space-6) var(--a-space-4); }
.a-show-namebar {
  position: sticky; top: var(--a-banner-top, 0); z-index: var(--a-z-sticky); display: grid; gap: var(--a-space-3);
  margin-inline: calc(-1 * var(--a-gutter)); padding: var(--a-space-3) var(--a-gutter);
  background: var(--a-paper); border-bottom: 1px solid var(--a-line);
}
.a-show-namebar__field { display: grid; gap: 6px; }
.a-show-namebar__row { display: flex; gap: var(--a-space-2); align-items: center; }
.a-show-namebar__row .a-ui-input { flex: 1 1 auto; min-width: 0; }
.a-show-namebar__hint { margin: 0; font-size: var(--a-text-caption); line-height: var(--a-lh-caption); color: var(--a-muted); }
.a-show-filters { display: flex; gap: var(--a-space-2); min-width: 0; min-inline-size: 0; margin: 0 calc(-1 * var(--a-gutter)); padding: 2px var(--a-gutter); border: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.a-show-filters::-webkit-scrollbar { display: none; }
.a-show-filters > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.a-show-filters .a-ui-chip { flex: none; white-space: nowrap; }
@media (min-width: 768px) {
  .a-show-namebar { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: end; margin-inline: 0; padding-inline: 0; }
  .a-show-filters { margin: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
}

/* ---------- Gallery: look cards ---------- */
.a-show-looks { display: grid; gap: var(--a-space-5); margin: 0; padding: var(--a-space-5) 0 var(--a-space-7); list-style: none; }
.a-show-looks__title { margin: var(--a-space-5) 0 0; font-size: var(--a-text-h3); font-weight: var(--a-weight-bold); }
@media (min-width: 768px) { .a-show-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .a-show-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.a-show-look { position: relative; display: grid; gap: var(--a-space-3); min-width: 0; padding: var(--a-space-3); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius-card); box-shadow: var(--a-shadow-1); }
.a-show-look.is-chosen { border-color: var(--a-primary); box-shadow: 0 0 0 2px var(--a-primary-tint); }
/* The preview: the look's own phone layout at the card's width, top part only, not interactive (the frame is inert). */
.a-show-look__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--a-surface-2); border: 1px solid var(--a-line); }
.a-show-look__frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.a-show-look__frame > .a-ui-skeleton { position: absolute; inset: 0; border-radius: 0; }
.a-show-look__status { position: absolute; inset: auto 0 0 0; display: grid; justify-items: center; gap: var(--a-space-2); padding: var(--a-space-4); text-align: center; background: var(--a-surface); border-top: 1px solid var(--a-line); font-size: var(--a-text-small); }
.a-show-look__body { display: grid; gap: 2px; padding-inline: var(--a-space-1); }
.a-show-look__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-space-2); font-family: var(--a-font-display); font-size: var(--a-text-h3); font-weight: var(--a-weight-semibold); line-height: 1.5; }
.a-show-look__line { margin: 0; font-size: var(--a-text-small); line-height: 1.6; color: var(--a-muted); }
.a-show-look__link { margin: 0; font-size: var(--a-text-caption); line-height: var(--a-lh-caption); color: var(--a-muted); }
.a-show-look__link bdi { color: var(--a-ink); font-weight: var(--a-weight-semibold); }
.a-show-look__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-space-2); }
.a-show-look__actions .a-ui-btn--primary:only-child { grid-column: 1 / -1; }
.a-show-look__actions > :only-child { grid-column: 1 / -1; }
.a-show-empty { padding-block: var(--a-space-7); }

/* ---------- «جرّبه»: one look on the whole screen ---------- */
.a-show-tryout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100dvh; background: var(--a-surface-2); }
.a-show-tryout__top {
  position: sticky; top: 0; z-index: var(--a-z-sticky); display: flex; align-items: center; gap: var(--a-space-2);
  min-height: 56px; padding: 6px var(--a-gutter); background: var(--a-surface); border-bottom: 1px solid var(--a-line);
}
.a-show-tryout__title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--a-font-display); font-size: 1.0625rem; font-weight: var(--a-weight-semibold); }
.a-show-tryout__body { display: grid; gap: var(--a-space-4); align-content: start; padding: var(--a-space-4) var(--a-gutter); min-width: 0; }
.a-show-tryout__controls { display: grid; gap: var(--a-space-4); min-width: 0; }
.a-show-tryout__group { display: grid; gap: var(--a-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.a-show-tryout__group > legend { padding: 0; margin-bottom: var(--a-space-2); font-size: var(--a-text-small); font-weight: var(--a-weight-bold); color: var(--a-muted); }
.a-show-tryout__group .a-ui-segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.a-show-tryout__bar { position: sticky; bottom: 0; z-index: var(--a-z-bar); display: grid; gap: 2px; justify-items: center; padding: 10px var(--a-gutter) max(10px, env(safe-area-inset-bottom)); background: var(--a-surface); border-top: 1px solid var(--a-line); }
.a-show-tryout__bar .a-ui-btn { width: 100%; }
@media (min-width: 1024px) {
  .a-show-tryout__body { grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: var(--a-space-6); padding-block: var(--a-space-5); }
  /* The preview comes first in the page (it's what phones show first); on wide screens the controls sit beside it. */
  .a-show-tryout__controls { grid-column: 1; grid-row: 1; position: sticky; top: 72px; }
  .a-show-tryout__body > .a-show-stage { grid-column: 2; grid-row: 1; }
  .a-show-tryout__bar { justify-items: end; }
  .a-show-tryout__bar .a-ui-btn { width: auto; min-width: 260px; }
}

/* The stage: a phone (390 wide, as on a real phone) or a computer (1280 wide, scaled to fit by showroom.js). */
.a-show-stage { display: grid; justify-items: center; min-width: 0; }
.a-show-device { position: relative; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--a-shadow-2); }
.a-show-device > iframe { display: block; border: 0; background: var(--a-surface); }
.a-show-device--mobile { width: min(100%, 390px); height: min(78dvh, 844px); border-radius: 28px; }
.a-show-device--mobile > iframe { width: 100%; height: 100%; }
.a-show-device--desktop { width: 100%; max-width: 1280px; aspect-ratio: 16 / 10; border-radius: var(--a-radius-btn); direction: ltr; }
.a-show-device--desktop > iframe {
  position: absolute; top: 0; left: 0; width: 1280px; height: 800px;
  transform: scale(var(--a-show-scale, 1)); transform-origin: 0 0;
}

/* The 8 palettes: a swatch per radio. The swatch colour is the palette's own (--a-show-swatch, from data). */
.a-show-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-space-2); margin: 0; padding: 0; list-style: none; }
.a-show-swatch { position: relative; display: grid; justify-items: center; gap: 4px; min-height: var(--a-tap); padding: 6px 2px; border-radius: 12px; cursor: pointer; font-size: var(--a-text-caption); font-weight: var(--a-weight-semibold); color: var(--a-muted); text-align: center; }
.a-show-swatch__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.a-show-swatch__dot { width: 32px; height: 32px; border-radius: 50%; background: var(--a-show-swatch, var(--a-line)); border: 2px solid var(--a-surface); box-shadow: 0 0 0 1px var(--a-outline); }
.a-show-swatch__input:checked ~ .a-show-swatch__dot { box-shadow: 0 0 0 3px var(--a-primary); }
.a-show-swatch__input:checked ~ .a-show-swatch__name { color: var(--a-ink); }
.a-show-swatch__input:focus-visible ~ .a-show-swatch__dot { outline: var(--a-focus-width) solid var(--a-focus); outline-offset: 4px; }
@media (min-width: 560px) { .a-show-swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .a-show-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- looks.hessety.com: the one «معاينة ببيانات متخيّلة» stripe on every preview ---------- */
.a-show-stripe {
  position: sticky; top: 0; z-index: var(--a-z-bar); display: flex; justify-content: center; align-items: center; gap: var(--a-space-2);
  min-height: 30px; padding: 4px var(--a-space-3); color: var(--a-ink); font: var(--a-weight-semibold) var(--a-text-caption)/1.4 var(--a-font-body); text-align: center;
  background: repeating-linear-gradient(-45deg, var(--a-sample) 0 10px, var(--a-sample-stripe) 10px 20px);
}

/* ---------- Demo academies ---------- */
/* The bar on every page: ours, not the teacher's, so neutral ink (never a palette slot) and it never closes.
   Phones: the short line + «اعمل زيها» stick; the full sentence and «شوفها بعين الطالب» sit under it on each page.
   From 768px everything is one sticky row. */
.a-show-demobar { position: sticky; top: 0; z-index: var(--a-z-bar); }
.a-show-demobar .a-ui-banner__text { flex: 1 1 10rem; font-size: var(--a-text-small); font-weight: var(--a-weight-semibold); }
.a-show-demobar__full { display: none; }
.a-show-demobar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-space-2); }
.a-show-demobar__student { display: none; }
/* The quiet button on the ink bar: paper text and a neutral outline (the palette's primary would fail contrast here). */
.a-show-demobar .a-ui-btn--ghost { --a-btn-fg: var(--a-paper); --a-btn-border: var(--a-outline); --a-btn-hover: transparent; }
.a-show-demobar .a-ui-btn--ghost:hover { text-decoration: underline; }
.a-show-demonote { display: grid; gap: var(--a-space-2); justify-items: start; padding: var(--a-space-3) var(--a-gutter); background: var(--a-surface-2); border-bottom: 1px solid var(--a-line); font-size: var(--a-text-small); line-height: 1.6; }
.a-show-demonote p { margin: 0; }
.a-show-demonote__as-student { display: inline-flex; align-items: center; gap: var(--a-space-2); font-weight: var(--a-weight-semibold); }
@media (min-width: 768px) {
  .a-show-demobar__short { display: none; }
  .a-show-demobar__full { display: inline; }
  .a-show-demobar__student { display: inline-flex; }
  .a-show-demonote { display: none; }
}
/* The read-only panel without JS: a page of its own with the same words. */
.a-show-demopage { display: grid; place-items: center; min-height: 70dvh; padding: var(--a-space-6) var(--a-gutter); }
.a-show-demopage__card { display: grid; gap: var(--a-space-3); justify-items: center; width: min(100%, 440px); text-align: center; }
.a-show-demopage__art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--a-accent-tint); color: var(--a-ink); }
.a-show-demopage__actions { display: grid; gap: var(--a-space-2); width: 100%; }

/* ---------- Builder additions (p6): markup details of the Blade pages ---------- */
/* hessety.com pages: the sticky name box sits under the site's 68px header. */
.a-show--site { --a-banner-top: 68px; }
.a-show-gallery-head__lead { margin: 0; }
.a-show-filters-form { min-width: 0; margin: 0; }
.a-show-gallery-note { margin-top: var(--a-space-4); }
.a-show-more-soon { margin: 0 0 var(--a-space-7); }
.a-show-look__choose { display: grid; min-width: 0; margin: 0; }
.a-show-try__strip { margin-block: 0; list-style: none; }
.a-show-try__thumb .a-show-shots__placeholder { padding: var(--a-space-1); font-size: var(--a-text-caption); }
.a-show-try + .a-show-shots { margin-top: var(--a-space-6); }
.a-show-shots__line { margin: 0; }
.a-show-tryout__choose { display: grid; width: 100%; margin: 0; }
@media (min-width: 1024px) { .a-show-tryout__choose { width: auto; } }
.a-show-demopage__text, .a-show-demo-panel__text { margin: 0; line-height: 1.7; }

@media print { .a-show-stickycta, .a-show-namebar, .a-show-tryout__bar, .a-show-demobar { display: none !important; } }