/* ============================================================
   ملف الإنجاز (Student Achievement Profile) — docs/student-achievement-profiles.md
   ما يخص الملف فقط: ثيمات الملف (رموز دلالية --pf-* مشتقة من لوحة المنصة)، الرأس والغلاف والأفاتار والإطارات،
   بطاقات الإنجاز، «رحلتي»، الجدار، وعناصر البنّاء. الأزرار والحقول والصفوف والأقسام من المكوّنات العامة.
   الثيم يغيّر أجزاء الملف فقط — لا الخط ولا المسافات ولا دلالات الأزرار ولا الوصولية.
   ============================================================ */

/* ---------- الثيمات: رموز دلالية فقط (لا ألوان حرفية؛ السماء من ألوان الشارات، والإطارات من معادنها) ---------- */
[data-pf-theme] {
  --pf-page: color-mix(in srgb, var(--palette-wheat-light) 40%, #fff);
  --pf-surface: var(--color-surface);
  --pf-surface-ink: var(--color-text);
  --pf-muted: var(--color-text-muted);
  --pf-hairline: var(--color-hairline);
  --pf-accent: var(--palette-forest-mid);
  --pf-on-accent: var(--palette-charcoal-light);
  --pf-accent-ink: var(--palette-forest-mid);
  --pf-accent-soft: color-mix(in srgb, var(--palette-forest-light) 13%, #fff);
  --pf-accent-line: color-mix(in srgb, var(--palette-forest-light) 34%, #fff);
  --pf-cover-from: color-mix(in srgb, var(--palette-wheat-light) 85%, #fff);
  --pf-cover-to: color-mix(in srgb, var(--palette-forest-light) 30%, var(--palette-wheat-light));
  --pf-cover-ink: var(--palette-forest-mid);
}

[data-pf-theme="mint"] {
  --pf-page: color-mix(in srgb, var(--palette-forest-light) 7%, #fff);
  --pf-accent: color-mix(in srgb, var(--palette-forest-light) 84%, #000);
  --pf-accent-ink: color-mix(in srgb, var(--palette-forest-mid) 90%, #000);
  --pf-accent-soft: color-mix(in srgb, var(--palette-forest-light) 16%, #fff);
  --pf-accent-line: color-mix(in srgb, var(--palette-forest-light) 40%, #fff);
  --pf-cover-from: color-mix(in srgb, var(--palette-forest-light) 12%, #fff);
  --pf-cover-to: color-mix(in srgb, var(--palette-forest-light) 36%, #fff);
  --pf-cover-ink: var(--palette-forest-light);
}

[data-pf-theme="sand"] {
  --pf-page: color-mix(in srgb, var(--palette-wheat-light) 70%, #fff);
  --pf-accent: var(--palette-umber-light);
  --pf-accent-ink: var(--palette-umber-light);
  --pf-accent-soft: color-mix(in srgb, var(--palette-wheat-mid) 22%, #fff);
  --pf-accent-line: color-mix(in srgb, var(--palette-wheat-mid) 50%, #fff);
  --pf-cover-from: var(--palette-wheat-light);
  --pf-cover-to: color-mix(in srgb, var(--palette-wheat-mid) 55%, var(--palette-wheat-light));
  --pf-cover-ink: var(--palette-wheat-dark);
}

[data-pf-theme="sky"] {
  --pf-page: color-mix(in srgb, var(--bdg-blue-a) 7%, #fff);
  --pf-accent: var(--bdg-blue-b);
  --pf-accent-ink: var(--bdg-blue-b);
  --pf-accent-soft: color-mix(in srgb, var(--bdg-blue-a) 13%, #fff);
  --pf-accent-line: color-mix(in srgb, var(--bdg-blue-a) 36%, #fff);
  --pf-cover-from: color-mix(in srgb, var(--bdg-blue-a) 10%, #fff);
  --pf-cover-to: color-mix(in srgb, var(--bdg-blue-a) 38%, #fff);
  --pf-cover-ink: var(--bdg-blue-b);
}

[data-pf-theme="gold"] {
  --pf-page: color-mix(in srgb, var(--palette-wheat-light) 55%, #fff);
  /* أغمق قليلًا من ذهبي القمح: نص أبيض فوقه ≥ 4.5:1 */
  --pf-accent: color-mix(in srgb, var(--palette-wheat-dark) 78%, #000);
  --pf-on-accent: var(--palette-charcoal-light);
  --pf-accent-ink: color-mix(in srgb, var(--palette-wheat-dark) 66%, #000);
  --pf-accent-soft: color-mix(in srgb, var(--palette-wheat-mid) 24%, #fff);
  --pf-accent-line: var(--palette-wheat-mid);
  --pf-cover-from: color-mix(in srgb, var(--palette-wheat-mid) 30%, #fff);
  --pf-cover-to: color-mix(in srgb, var(--palette-wheat-dark) 55%, var(--palette-wheat-mid));
  --pf-cover-ink: color-mix(in srgb, var(--palette-wheat-dark) 70%, #000);
}

[data-pf-theme="night"] {
  --pf-page: color-mix(in srgb, var(--palette-forest-dark) 82%, var(--palette-charcoal-dark));
  --pf-surface: color-mix(in srgb, var(--palette-forest-dark) 72%, var(--palette-charcoal-mid));
  --pf-surface-ink: var(--palette-charcoal-light);
  --pf-muted: color-mix(in srgb, var(--palette-charcoal-light) 76%, transparent);
  --pf-hairline: color-mix(in srgb, var(--palette-charcoal-light) 12%, transparent);
  --pf-accent: var(--palette-wheat-mid);
  --pf-on-accent: var(--palette-charcoal-dark);
  --pf-accent-ink: var(--palette-wheat-mid);
  --pf-accent-soft: color-mix(in srgb, var(--palette-wheat-mid) 16%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--palette-wheat-mid) 45%, transparent);
  --pf-cover-from: var(--palette-forest-dark);
  --pf-cover-to: color-mix(in srgb, var(--palette-forest-mid) 60%, var(--palette-charcoal-dark));
  --pf-cover-ink: var(--palette-wheat-mid);
}

/* ---------- الغلاف العام للصفحات العامة ---------- */
.pf-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pf-page);
  color: var(--pf-surface-ink);
}

.pf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-3) max(var(--space-4), env(safe-area-inset-left, 0px));
}

.pf-top__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--pf-surface-ink);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-decoration: none;
  line-height: 1.4;
}

.pf-top__brand img { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }

.pf-top__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--pf-accent-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.pf-top__home:focus-visible,
.pf-top__brand:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; }

.pf-manage { display: flex; justify-content: center; padding: 0 var(--space-4) var(--space-3); }

.pf-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-8) max(var(--space-4), env(safe-area-inset-left, 0px));
}

.pf-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  color: var(--pf-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.pf-foot img { width: 76px; height: auto; opacity: .9; }
[data-pf-theme="night"] .pf-foot img { filter: brightness(0) invert(1); opacity: .8; }

.pf-preview-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-info-soft);
  color: var(--color-info-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.pf-preview-bar > span { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---------- الملف ---------- */
.pf {
  display: grid;
  gap: var(--space-4);
  max-width: 760px;
  margin: 0 auto;
}

.pf-hero,
.pf-mini {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sheet);
  background: var(--pf-surface);
  color: var(--pf-surface-ink);
  border: 1px solid var(--pf-hairline);
  box-shadow: var(--shadow-card);
}

.pf-cover {
  position: relative;
  height: clamp(120px, 34vw, 190px);
  overflow: hidden;
  background: linear-gradient(150deg, var(--pf-cover-from), var(--pf-cover-to));
  color: var(--pf-cover-ink);
}

.pf-cover__art { position: absolute; inset: 0; width: 100%; height: 100%; }

.pf-hero__body,
.pf-mini__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-5) var(--space-6);
}

.pf-hero__avatar { margin-top: -58px; }

.pf-name {
  margin: var(--space-3) 0 0;
  max-width: 100%;
  color: var(--pf-surface-ink);
  font-size: clamp(1.5rem, 6.2vw, 2rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pf-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--space-2) 0 0;
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--pf-accent-soft);
  color: var(--pf-accent-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.pf-title[hidden] { display: none; }

.pf-headline {
  margin: var(--space-3) 0 0;
  max-width: 38ch;
  color: var(--pf-muted);
  line-height: 1.7;
}

.pf-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.pf-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-control);
  background: var(--pf-accent-soft);
  color: var(--pf-accent-ink);
  font-size: var(--font-size-sm);
}

.pf-stat__value { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.pf-stat__label { color: var(--pf-surface-ink); }

.pf .btn.pf-share,
.pf-share-card .btn[data-pf-share]:not(.btn--ghost) {
  margin-top: var(--space-4);
  background: var(--pf-accent, var(--color-primary));
  border-color: transparent;
  color: var(--pf-on-accent, #fff);
}

/* لوحة الاسم (Nameplate) */
.pf-hero--ribbon .pf-name {
  padding: 0 .35em;
  background: linear-gradient(transparent 58%, var(--pf-accent-soft) 58%, var(--pf-accent-soft) 92%, transparent 92%);
}

.pf-hero--ornament .pf-name {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}

.pf-hero--ornament .pf-name::before,
.pf-hero--ornament .pf-name::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 10px;
  background:
    radial-gradient(circle, var(--pf-accent) 2.5px, transparent 3px) center / 10px 10px no-repeat,
    linear-gradient(var(--pf-accent-line), var(--pf-accent-line)) center / 100% 2px no-repeat;
}

/* ---------- الأفاتار والإطارات ---------- */
.pf-avatar {
  --pf-frame-ring: var(--pf-accent-line);
  --pf-avatar-size: 72px;
  display: inline-grid;
  place-items: center;
  width: var(--pf-avatar-size);
  height: var(--pf-avatar-size);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--pf-accent-soft);
  color: var(--pf-accent-ink);
  font-weight: var(--font-weight-bold);
  font-size: calc(var(--pf-avatar-size) * .36);
  line-height: 1;
  box-shadow: 0 0 0 4px var(--pf-surface), 0 0 0 7px var(--pf-frame-ring);
}

[data-pf-theme="night"] .pf-avatar--initials,
[data-pf-theme="night"] .pf-avatar--preset { background: color-mix(in srgb, var(--palette-wheat-mid) 22%, var(--pf-surface)); }

.pf-avatar--xl { --pf-avatar-size: 112px; }
.pf-avatar--lg { --pf-avatar-size: 72px; }
.pf-avatar--sm { --pf-avatar-size: 40px; box-shadow: 0 0 0 2px var(--pf-surface), 0 0 0 4px var(--pf-frame-ring); }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pf-frame--emerald { --pf-frame-ring: var(--palette-forest-light); }
.pf-frame--bronze { --pf-frame-ring: var(--bdg-metal-bronze); }
.pf-frame--silver { --pf-frame-ring: var(--bdg-metal-silver); }
.pf-frame--gold { --pf-frame-ring: var(--bdg-metal-gold); }
.pf-avatar--xl.pf-frame--gold { box-shadow: 0 0 0 4px var(--pf-surface), 0 0 0 8px var(--bdg-metal-gold), 0 0 0 13px color-mix(in srgb, var(--bdg-metal-gold) 22%, transparent); }
.pf-avatar--xl.pf-frame--silver { box-shadow: 0 0 0 4px var(--pf-surface), 0 0 0 8px var(--bdg-metal-silver), 0 0 0 12px color-mix(in srgb, var(--bdg-metal-silver) 25%, transparent); }

/* ---------- الأقسام ---------- */
.pf-sec {
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--pf-surface);
  color: var(--pf-surface-ink);
  border: 1px solid var(--pf-hairline);
  box-shadow: var(--shadow-card);
}

.pf-sec__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--pf-surface-ink);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.pf-sec__title svg { color: var(--pf-accent); flex-shrink: 0; }
.pf-sec__count { color: var(--pf-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

/* الإنجاز البارز */
.pf-feature {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--pf-accent-soft), transparent 85%);
  border: 1px solid var(--pf-accent-line);
}

.pf-feature__art { flex-shrink: 0; }
.pf-feature__body { min-width: 0; }
.pf-feature__eyebrow { margin: 0 0 2px; color: var(--pf-muted); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); }
.pf-feature__name { margin: 0; font-size: 1.25rem; font-weight: var(--font-weight-bold); line-height: 1.4; overflow-wrap: anywhere; }
.pf-feature__desc { margin: var(--space-1) 0 0; color: var(--pf-muted); line-height: 1.6; }
.pf-feature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--pf-muted); font-size: var(--font-size-meta); }

/* أبرز إنجازاتي */
.pf-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.pf-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.pf-highlight .bdg { --bdg-size: 84px; }
.pf-highlight__name { margin: 0; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); line-height: 1.45; overflow-wrap: anywhere; }
.pf-highlight__meta { margin: 0; color: var(--pf-muted); font-size: var(--font-size-xs); }

/* شبكة الشارات */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--space-5) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.pf-badge__name { font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); line-height: 1.45; overflow-wrap: anywhere; }
.pf-badge__date { color: var(--pf-muted); font-size: var(--font-size-xs); }
.pf-badge__count {
  position: absolute;
  top: 0;
  inset-inline-end: calc(50% - 44px);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--pf-accent);
  color: var(--pf-on-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.pf-trophy {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--pf-accent-soft);
  color: var(--pf-accent-ink);
}

.pf-trophy--lg { width: 104px; height: 104px; }

/* رحلتي */
.pf-journey { margin: 0; padding: 0; list-style: none; }

.pf-journey__item {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.pf-journey__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 4px;
  inset-inline-start: 17px;
  width: 2px;
  border-radius: 2px;
  background: var(--pf-accent-line);
}

.pf-journey__dot {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pf-accent-soft);
  color: var(--pf-accent-ink);
}

.pf-journey__body { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; min-width: 0; }
.pf-journey__date { color: var(--pf-accent-ink); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); }
.pf-journey__label { line-height: 1.55; overflow-wrap: anywhere; }

/* الهدف والعائلة والتحديات */
.pf-goal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-tile);
  background: var(--pf-accent-soft);
  color: var(--pf-accent-ink);
  font-size: 1.0625rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.pf-goal svg { flex-shrink: 0; }

.pf-family {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-tile);
  border-inline-start: 4px solid var(--pf-accent);
  background: var(--pf-accent-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.pf-family p { margin: 0; }

.pf-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.pf-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-tile);
  background: var(--pf-accent-soft);
}

.pf-list__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--pf-surface);
  color: var(--pf-accent-ink);
}

.pf-list__body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: var(--space-1); }
.pf-list__title { font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.pf-list__meta { color: var(--pf-muted); font-size: var(--font-size-meta); }

.pf-list__item--audio { align-items: flex-start; }

.pf-audio-player {
  width: 100%;
  max-width: 360px;
  height: 40px;
  border-radius: var(--radius-pill);
}

.pf-audio-player--bg { margin-top: var(--space-3); }

.pf-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--pf-surface);
  color: var(--pf-muted);
  text-align: center;
}

/* ---------- الجدار ---------- */
.pf-wall-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-sheet);
  background: var(--pf-surface);
  border: 1px solid var(--pf-hairline);
  box-shadow: var(--shadow-card);
}

.pf-wall-hero .pf-cover { height: clamp(90px, 22vw, 140px); }
.pf-wall-hero__body { padding: var(--space-4) var(--space-5) var(--space-5); text-align: center; }
.pf-wall-hero__body .pf-headline { margin-inline: auto; }

.pf-wall-filters { margin-bottom: var(--space-4); }

/* أقسام الجدار بلا سطح (البطاقات هي الأسطح — لا بطاقة داخل بطاقة). */
.pf-sec--plain { padding: 0; margin-bottom: var(--space-6); background: none; border: 0; box-shadow: none; }

.pf-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-wall-card {
  border-radius: var(--radius-card);
  background: var(--pf-surface);
  color: var(--pf-surface-ink);
  border: 1px solid var(--pf-hairline);
  box-shadow: var(--shadow-card);
}

.pf-wall-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4) var(--space-3);
  border-radius: inherit;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.pf-wall-card__link:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; }
.pf-wall-card__who { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; }
.pf-wall-card__name { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.pf-wall-card__what { font-size: var(--font-size-sm); line-height: 1.55; overflow-wrap: anywhere; }
.pf-wall-card__when { color: var(--pf-muted); font-size: var(--font-size-xs); }

/* ---------- داخل التطبيق: النظرة العامة والبنّاء والمشاركة ---------- */
.pf-mini { margin-bottom: var(--space-4); }
.pf-mini .pf-cover { height: 96px; }
.pf-mini__body { padding-bottom: var(--space-4); }
.pf-mini__body > [data-pf-avatar-slot] { margin-top: -38px; }
.pf-mini__name { font-size: 1.375rem; margin-top: var(--space-2); }

.pf-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }

.pf-tasks { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }

.pf-task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  color: var(--color-text-muted);
}

.pf-task__mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-fill);
  color: var(--color-text-faint);
}

.pf-task.is-done { color: var(--color-text); }
.pf-task.is-done .pf-task__mark { background: var(--color-success-soft); color: var(--color-success-strong); }

.pf-builder__preview { margin-bottom: var(--space-2); }
.pf-builder__label { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); }

@media (min-width: 768px) {
  .pf-builder__preview {
    position: sticky;
    top: calc(var(--topbar-height, 60px) + var(--space-2));
    z-index: 3;
  }
}

.pf-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}

.pf-picks--badges { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

.pf-pick { position: relative; }

.pf-pick__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.pf-pick__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  height: 100%;
  min-height: 44px;
  padding: var(--space-2);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-tile);
  background: var(--color-surface);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pf-pick__name { font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); line-height: 1.4; overflow-wrap: anywhere; }
.pf-pick__hint { display: inline-flex; align-items: center; gap: 3px; color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.35; }

.pf-pick__input:checked + .pf-pick__label {
  border-color: var(--color-primary);
  background: var(--color-sage-soft);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.pf-pick__input:focus-visible + .pf-pick__label { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pf-pick__label.is-locked { cursor: not-allowed; background: var(--color-surface-secondary); }
.pf-pick__label.is-locked > :not(.pf-pick__hint):not(.pf-pick__name) { opacity: .45; filter: grayscale(.6); }
.pf-pick__input:disabled:not(:checked) + .pf-pick__label:not(.is-locked) { opacity: .5; cursor: not-allowed; }

.pf-swatch {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  border-radius: var(--radius-control);
  background: linear-gradient(150deg, var(--pf-cover-from), var(--pf-cover-to));
  border: 1px solid var(--color-hairline);
}

.pf-swatch > span {
  position: absolute;
  bottom: 6px;
  inset-inline-start: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pf-accent);
  box-shadow: 0 0 0 2px var(--pf-surface);
}

.pf-cover--thumb { width: 100%; height: 44px; border-radius: var(--radius-control); border: 1px solid var(--color-hairline); }

.pf-plate { display: block; width: 100%; padding: var(--space-1) 0; }
.pf-plate .pf-name { margin: 0; font-size: var(--font-size-sm); color: var(--color-text); white-space: nowrap; }
.pf-plate.pf-hero--ornament .pf-name::before,
.pf-plate.pf-hero--ornament .pf-name::after { width: 12px; }

.pf-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  cursor: pointer;
}

.pf-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  line-height: 1.6;
  cursor: pointer;
}

.pf-consent input { width: 22px; height: 22px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--color-primary); }

.pf-vis { justify-content: flex-start; gap: var(--space-3); }
.pf-vis__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--color-sage-soft); color: var(--color-primary); }
.pf-vis__text { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.pf-vis__title { font-weight: var(--font-weight-bold); }
.pf-vis__desc { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: 1.55; }

.pf-qr { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.pf-qr .qr { width: 200px; height: 200px; border-radius: var(--radius-control); border: 1px solid var(--color-hairline); }

.pf-mod-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pf-mod-form .field__input { flex: 1 1 220px; min-width: 0; }

/* ---------- سطح المكتب: لوحة متمركزة بعمودين (الرأس والأقسام العريضة بعرض كامل) ---------- */
@media (min-width: 1024px) {
  .pf {
    max-width: 960px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: start;
  }

  .pf > .pf-hero,
  .pf > .pf-sec:has(.pf-feature),
  .pf > .pf-sec:has(.pf-highlights),
  .pf > .pf-sec:has(.pf-grid),
  .pf > .pf-start { grid-column: 1 / -1; }

  .pf-cover { height: 210px; }
  .pf-wall { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 359px) {
  .pf-highlights { gap: var(--space-2); }
  .pf-highlight .bdg { --bdg-size: 72px; }
  .pf-feature { flex-direction: column; text-align: center; }
  .pf-feature__meta { justify-content: center; }
}

/* ---------- حركة خفيفة فقط (استثناء موثّق: كشف الشارات عند فتح الملف) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pf-hero .pf-hero__avatar,
  .pf-feature__art .bdg,
  .pf-highlight .bdg { animation: pf-reveal 260ms ease-out both; }
  .pf-highlight:nth-child(2) .bdg { animation-delay: 60ms; }
  .pf-highlight:nth-child(3) .bdg { animation-delay: 120ms; }
  .pf-wall-card { transition: transform var(--transition-fast); }
  .pf-wall-card:active { transform: scale(.985); }
}

@keyframes pf-reveal {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: none; }
}