/* =============================================================
   SOFT ICON TILES — البلاطات الناعمة السياقية
   (madar §7 icon-in-a-tile + §16.1 "Strata" lite)
   The glyph sits in a soft tile owned by the base layers
   (final.css / final_hub.css / final_sticker.css / final_pages.css):
   dept-color fill ≈11%, hairline border ≈22%, glyph at the full
   dept color. This layer only:
     1. bans ghosts & glows — no text-shadow on glyphs, ever,
     2. unifies glyph optics + per-context sizes,
     3. adds the Strata-lite hover: tile settles, glyph lifts.
   ============================================================= */

/* ---------- glyph optics: one voice, no ghosts ---------- */
.f-body .f-deck__ico .material-symbols-outlined,
.f-body .fs-card__ico .material-symbols-outlined,
.f-body .f-exp__ico .material-symbols-outlined,
.f-body .fd-hero__ico .material-symbols-outlined,
.f-body .fg-card__ico .material-symbols-outlined,
.f-body .f-h2__icon .material-symbols-outlined,
.f-body .sp-row__ico .material-symbols-outlined,
.f-body .hub-stack__ico .material-symbols-outlined,
.f-body .hub-pass__ico .material-symbols-outlined,
.f-body .adv-row__ico .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 480, 'GRAD' 0, 'opsz' 40;
  text-shadow: none;
  transition: transform var(--f-dur-md) var(--f-spring),
              filter var(--f-dur-md) var(--f-spring);
}

/* ---------- Strata-lite: tile settles, glyph lifts ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .f-exp:hover .f-exp__ico,
  .fs-card:hover .fs-card__ico,
  .fg-card__head:hover .fg-card__ico,
  .f-deck__panel:not(.is-open):hover .f-deck__ico {
    transform: scale(0.96);
  }
  .f-exp:hover .f-exp__ico .material-symbols-outlined,
  .fs-card:hover .fs-card__ico .material-symbols-outlined,
  .fg-card__head:hover .fg-card__ico .material-symbols-outlined,
  .f-deck__panel:not(.is-open):hover .f-deck__ico .material-symbols-outlined {
    transform: translateY(-2px);
    filter: drop-shadow(0 3px 4px color-mix(in srgb, currentColor 28%, transparent));
  }
}

/* active/selected states: same lift, held (state = real elevation) */
.sp-row.is-sel .sp-row__ico .material-symbols-outlined,
.hub-stack.is-on .hub-stack__ico .material-symbols-outlined,
.hub-pass.is-focus .hub-pass__ico .material-symbols-outlined,
.f-deck__panel.is-open .f-deck__ico .material-symbols-outlined {
  transform: translateY(-2px);
  filter: drop-shadow(0 3px 4px color-mix(in srgb, currentColor 24%, transparent));
}

/* ---------- per-context glyph sizes (tuned, keep exact) ---------- */
.f-body .f-deck__ico .material-symbols-outlined  { font-size: 30px !important; }
.f-body .hub-pass__ico .material-symbols-outlined { font-size: 36px !important; }
.f-body .hub-stack__ico .material-symbols-outlined { font-size: 25px !important; }
.f-body .f-exp__ico .material-symbols-outlined   { font-size: 26px !important; }
.f-body .fs-card__ico .material-symbols-outlined { font-size: 27px !important; }
.f-body .fd-hero__ico .material-symbols-outlined { font-size: 50px !important; }
.f-body .fg-card__ico .material-symbols-outlined { font-size: 25px !important; }
.f-body .sp-row__ico .material-symbols-outlined  { font-size: 22px !important; }
.f-body .fs-rail__ico .material-symbols-outlined { font-size: 19px !important; }

.f-body .fs-rail__ico { width: 24px; height: 24px; }
.f-body .fd-hero__ico { width: 78px; height: 78px; }
.f-body .hub-pass__ico { width: 56px; height: 56px; }

/* h2 + page-row icons: plain ink glyph, no tile (dense context) */
.f-body .f-h2__icon { color: var(--f-navy); }
.f-body.dark .f-h2__icon { color: var(--f-cs); }

@media (prefers-reduced-motion: reduce) {
  .f-body .f-deck__ico .material-symbols-outlined,
  .f-body .fs-card__ico .material-symbols-outlined,
  .f-body .f-exp__ico .material-symbols-outlined,
  .f-body .sp-row__ico .material-symbols-outlined,
  .f-body .hub-stack__ico .material-symbols-outlined,
  .f-body .hub-pass__ico .material-symbols-outlined {
    transition: none;
    transform: none;
    filter: none;
  }
}