/**
 * Phosphor Duotone — RTL overlay safety + optical centering for square chrome.
 *
 * Load AFTER the Phosphor stylesheet (see theme.v1.partials.baseStyles).
 *
 * Overlay contract:
 * - Duotone paints :before + :after; :after must pull back with margin-left:-1em.
 * - Force an LTR isolated inline context so that works under dir=rtl.
 * - Never set `display` on bare `.ph-duotone` — it overrides theme hide rules
 *   such as `.app-favorite-toggle__icon--fill { display: none }`.
 *
 * Optical contract:
 * - Phosphor ink often sits slightly left of the geometric em center.
 * - Nudges use `em` so they scale with icon font-size (not magic px).
 * - Prefer transform on the glyph (`i`), not on chrome parents that may animate
 *   their own transform / create containing blocks.
 *
 * Optical token map (measured; retune tokens — not call sites):
 * | Token                         | X        | Y         | Context              |
 * | ----------------------------- | -------- | --------- | -------------------- |
 * | --ph-optical-* (root default) | 0.12em   | 0         | shared chrome        |
 * | --ph-optical-*-favorite       | 0.1em    | 0.05em    | favorite heart       |
 * | --ph-optical-*-faq-chevron    | 0.16em   | 0.1em     | FAQ + troubleshooting caret |
 * | --ph-optical-*-sheet-nav      | 0.16em   | (inherit) | bottom-sheet close   |
 * | --ph-optical-*-desktop-icon   | 0.1em    | 0.03em    | desktop header icon  |
 * | --ph-optical-*-desktop-login  | 0.20em   | 0.03em    | desktop login btn    |
 * | --ph-optical-*-desktop-nav    | (unused) | (unused)  | desktop nav uses per-glyph pin |
 * | --ph-optical-*-desc-toggle    | 0.15em   | (inherit) | body desc expand     |
 * | --ph-optical-*-desc-collapse  | 0.14em   | 0.04em    | body desc collapse   |
 * | --ph-optical-*-stat-star      | 0.13em   | (inherit) | app detail star      |
 * | --ph-optical-*-review-react   | 0.03em   | (inherit) | review react icon    |
 * | --ph-optical-*-sidebar-tile   | 0.11em   | 0         | .menu-icon-circle fallback |
 * | --ph-optical-*-sb-keyhole     | 0.1em    | 0         | ورود/ثبت‌نام              |
 * | --ph-optical-*-sb-user        | 0.1em    | -0.02em   | پروفایل من                 |
 * | --ph-optical-*-sb-chat        | 0.14em   | -0.02em   | نظرات من                   |
 * | --ph-optical-*-sb-heart       | 0.06em   | 0.02em    | مورد علاقه‌ها              |
 * | --ph-optical-*-sb-users       | 0.09em   | 0         | درباره ما                  |
 * | --ph-optical-*-sb-envelope    | 0.12em   | 0.02em    | ارتباط با ما               |
 * | --ph-optical-*-sb-arrows      | 0.14em   | 0         | بروزرسانی                  |
 * | --ph-optical-*-sb-bell        | 0.11em   | 0         | اطلاع‌رسانی                |
 * | --ph-optical-*-sb-moon        | 0.15em   | -0.05em   | مد تاریک                   |
 * | --ph-optical-*-category-tile  | 0.1em    | -0.04em   | /apps/categories phosphor  |
 * | --ph-optical-*-search-filter  | 0.14em   | 0.02em    | search filter faders       |
 * | --ph-optical-*-sheet-select   | 0.12em   | 0.08em    | filter sheet-select tiles  |
 * | --ph-optical-*-sheet-select-game | 0.04em | 0.08em    | type game-controller       |
 * | --ph-optical-*-foot-callout   | 0.14em   | 0.04em    | PWA/sheet foot-callout tick |
 * | --ph-optical-*-archive-notes  | 0.10em   | 0em       | archive notes info squares  |
 * | --ph-optical-*-archive-chrome | 0.10em   | 0em       | archive zone + version card |
 * | --ph-optical-*-version-branch | 0.22em   | 0.08em    | version chip git-branch     |
 * | --ph-optical-*-http-error     | 0.12em   | 0em       | HTTP error circle           |
 *
 * About page square/circle chrome uses geometric centering
 * (`left/top: 50%` + `translate(calc(-50% + 0.12em), -50%)`) instead of per-glyph tokens.
 * Optical translate on those glyphs shifted the 1em box off the wrap center.
 */
:root {
    --ph-optical-x: 0.12em;
    --ph-optical-y: 0;

    --ph-optical-x-favorite: 0.1em;
    --ph-optical-y-favorite: 0.05em;

    --ph-optical-x-faq-chevron: 0.16em;
    --ph-optical-y-faq-chevron: 0.1em;

    --ph-optical-x-sheet-nav: 0.16em;

    --ph-optical-x-desktop-icon: 0.1em;
    --ph-optical-y-desktop-icon: 0.03em;

    --ph-optical-x-desktop-login: 0.2em;
    --ph-optical-y-desktop-login: 0.03em;

    --ph-optical-x-desktop-nav: 0.05em;
    --ph-optical-y-desktop-nav: 0.05em;

    --ph-optical-x-desc-toggle: 0.15em;

    --ph-optical-x-desc-collapse: 0.14em;
    --ph-optical-y-desc-collapse: 0.04em;

    --ph-optical-x-stat-star: 0.13em;

    --ph-optical-x-review-react: 0.03em;

    /* Sidebar .menu-icon-circle — fallback + per-glyph (live-measured). */
    --ph-optical-x-sidebar-tile: 0.11em;
    --ph-optical-y-sidebar-tile: 0;

    --ph-optical-x-sb-keyhole: 0.1em;
    --ph-optical-y-sb-keyhole: 0;

    --ph-optical-x-sb-user: 0.1em;
    --ph-optical-y-sb-user: -0.02em;

    --ph-optical-x-sb-chat: 0.14em;
    --ph-optical-y-sb-chat: -0.02em;

    --ph-optical-x-sb-heart: 0.06em;
    --ph-optical-y-sb-heart: 0.02em;

    --ph-optical-x-sb-users: 0.09em;
    --ph-optical-y-sb-users: 0;

    --ph-optical-x-sb-envelope: 0.12em;
    --ph-optical-y-sb-envelope: 0.02em;

    --ph-optical-x-sb-copyright: 0.1em;
    --ph-optical-y-sb-copyright: 0;

    --ph-optical-x-sb-shield: 0.1em;
    --ph-optical-y-sb-shield: 0;

    --ph-optical-x-sb-arrows: 0.14em;
    --ph-optical-y-sb-arrows: 0;

    --ph-optical-x-sb-bell: 0.11em;
    --ph-optical-y-sb-bell: 0;

    --ph-optical-x-sb-moon: 0.15em;
    --ph-optical-y-sb-moon: -0.05em;

    --ph-optical-x-category-tile: 0.1em;
    --ph-optical-y-category-tile: -0.04em;

    --ph-optical-x-search-filter: 0.14em;
    --ph-optical-y-search-filter: 0.02em;

    --ph-optical-x-sheet-select: 0.12em;
    --ph-optical-y-sheet-select: 0.08em;

    --ph-optical-x-sheet-select-game: 0.04em;
    --ph-optical-y-sheet-select-game: 0.08em;

    --ph-optical-x-foot-callout: 0.14em;
    --ph-optical-y-foot-callout: 0.04em;

    --ph-optical-x-archive-notes: 0.10em;
    --ph-optical-y-archive-notes: 0em;

    --ph-optical-x-archive-chrome: 0.10em;
    --ph-optical-y-archive-chrome: 0em;

    --ph-optical-x-version-branch: 0.22em;
    --ph-optical-y-version-branch: 0.08em;

    --ph-optical-x-http-error: 0.12em;
    --ph-optical-y-http-error: 0em;
}

.ph-duotone,
.ph-fill,
.ph-bold {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    line-height: 1;
    vertical-align: middle;
    text-align: left;
}

.ph-duotone:after {
    margin-left: -1em !important;
    margin-right: 0 !important;
}

/*
 * Theme toggles: only the mode-appropriate control is visible.
 * Use !important so later flex/display utilities cannot resurrect the hidden peer
 * (regression: `.header-bar a { display:inline-flex }` showed sun+moon together).
 */
.theme-light .show-on-theme-dark,
.theme-dark .show-on-theme-light {
    display: none !important;
}

.theme-light .header-bar a.show-on-theme-light,
.theme-dark .header-bar a.show-on-theme-dark,
.theme-light .desktop-header__icon-btn.show-on-theme-light,
.theme-dark .desktop-header__icon-btn.show-on-theme-dark {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Shared glyph box + optical nudge (safe contexts — not favorite fill/line swap). */
.header-bar a:not(.header-title) > i.ph-duotone,
.header-bar a:not(.header-title) > i.ph-fill,
.header-bar a:not(.header-title) > i.ph-bold,
.theme-bottom-sheet__close > .ph-duotone,
.theme-bottom-sheet__nav-back > .ph-duotone,
.theme-bottom-sheet__head-actions .theme-bottom-sheet__close .ph-duotone,
.theme-bottom-sheet__head-actions .theme-bottom-sheet__nav-back .ph-duotone,
.desktop-header__icon-btn > i.ph-duotone,
.desktop-header__login-btn > i.ph-duotone,
.app-body-desc__toggle-icon > i.ph-duotone,
.app-body-desc__collapse-icon > i.ph-duotone,
.app-detail-stat-card__star.ph-duotone,
.app-reviews__action > i.ph-duotone.app-reviews__react-icon,
.app-faq__chevron > i.ph-duotone,
.app-install-troubleshooting__chevron > i.ph-duotone,
.app-category-tile__phosphor > i.ph-duotone,
.app-search-toolbar__filter-btn > i.ph-duotone,
.app-search-filter-sheet__summary-icon.ph-duotone,
.theme-sheet-select__icon > i.ph-duotone,
.theme-sheet-select__chevron.ph-duotone,
.theme-bottom-sheet__foot-callout-icon > i.ph-duotone,
.app-download-archive-notes__head-badge > i.ph-duotone,
.app-download-archive-notes__item-icon > i.ph-duotone,
.app-download-archive-download-zone__header-icon > i.ph-duotone,
.app-download-version-card__head-icon > i.ph-duotone,
.menu-icon-circle > i.ph-duotone,
.menu-icon-circle > i.ph-fill,
.menu-icon-circle > i.ph-bold {
    display: inline-block;
    width: 1em;
    height: 1em;
    transform: translate(var(--ph-optical-x), var(--ph-optical-y));
}

/*
 * Favorite toggle: pin the 1em glyph box to the square chrome center.
 * Do not flex-center then translate() — that shifts the whole box (seen as
 * top-left / bottom-right). Never set `display` here; line/fill swap is
 * owned by theme CSS.
 */
.app-favorite-toggle__icons .ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    margin: 0;
    --ph-optical-x: var(--ph-optical-x-favorite);
    --ph-optical-y: var(--ph-optical-y-favorite);
    transform: translate(
        calc(-50% + var(--ph-optical-x)),
        calc(-50% + var(--ph-optical-y))
    );
}

/* Context tokens — override vars only; shared rule owns the transform. */
.theme-bottom-sheet__close > .ph-duotone,
.theme-bottom-sheet__nav-back > .ph-duotone,
.theme-bottom-sheet__head-actions .theme-bottom-sheet__close .ph-duotone,
.theme-bottom-sheet__head-actions .theme-bottom-sheet__nav-back .ph-duotone {
    --ph-optical-x: var(--ph-optical-x-sheet-nav);
}

.desktop-header__icon-btn > i.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-desktop-icon);
    --ph-optical-y: var(--ph-optical-y-desktop-icon);
}

.desktop-header__login-btn > i.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-desktop-login);
    --ph-optical-y: var(--ph-optical-y-desktop-login);
}

.app-body-desc__toggle-icon > i.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-desc-toggle);
}

.app-body-desc__collapse-icon > i.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-desc-collapse);
    --ph-optical-y: var(--ph-optical-y-desc-collapse);
}

.app-detail-stat-card__star.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-stat-star);
}

.app-reviews__action > i.ph-duotone.app-reviews__react-icon {
    --ph-optical-x: var(--ph-optical-x-review-react);
}

.app-faq__chevron > i.ph-duotone,
.app-install-troubleshooting__chevron > i.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-faq-chevron);
    --ph-optical-y: var(--ph-optical-y-faq-chevron);
}

.app-category-tile__phosphor > i.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-category-tile);
    --ph-optical-y: var(--ph-optical-y-category-tile);
}

.app-search-toolbar__filter-btn > i.ph-duotone,
.app-search-filter-sheet__summary-icon.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-search-filter);
    --ph-optical-y: var(--ph-optical-y-search-filter);
}

.theme-sheet-select__icon > i.ph-duotone,
.theme-sheet-select__chevron.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-sheet-select);
    --ph-optical-y: var(--ph-optical-y-sheet-select);
}

.theme-sheet-select__icon > i.ph-game-controller {
    --ph-optical-x: var(--ph-optical-x-sheet-select-game);
    --ph-optical-y: var(--ph-optical-y-sheet-select-game);
}

.theme-bottom-sheet__foot-callout-icon > i.ph-duotone {
    --ph-optical-x: var(--ph-optical-x-foot-callout);
    --ph-optical-y: var(--ph-optical-y-foot-callout);
}

/*
 * About page: pin the 1em glyph box to the wrap center.
 * Optical translate() on these glyphs shifted the box off-center (the wrap
 * already uses place-items: center). Chip is already position:absolute.
 */
.about-stat__icon,
.about-value-card__icon,
.about-timeline__marker,
.about-faq__q-icon,
.about-hero__orb-core,
.about-cta__social-link {
    position: relative;
}

.about-faq__q-icon > i.ph-duotone,
.about-cta__social-link > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.12em), -50%);
}

.about-cta__social-link > i.ph-telegram-logo {
    transform: translate(-50%, -50%);
}

/*
 * Hero orb + chips: pin the 1em box; optical shift is measured per glyph.
 * Nudge stays on `i` — chip wrap animates its own transform.
 */
.about-hero__orb-core > i.ph-duotone,
.about-hero__chip > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(-50%, -50%);
}

.about-hero__orb-core > i.ph-duotone {
    transform: translate(calc(-50% + 0.13em), calc(-50% - 0.02em));
}

.about-hero__chip > i.ph-game-controller {
    transform: translate(calc(-50% + 0.04em), -50%);
}

.about-hero__chip > i.ph-android-logo {
    transform: translate(calc(-50% + 0.08em), calc(-50% + 0.04em));
}

.about-hero__chip > i.ph-download-simple {
    transform: translate(calc(-50% + 0.14em), calc(-50% + 0.04em));
}

/*
 * Stat tiles: pin the 1em box, then optically shift by unused em-box
 * (Phosphor glyphs are left-aligned in the em). Measured at 28px.
 */
.about-stat__icon > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.13em), -50%);
}

.about-stat__icon > i.ph-squares-four {
    transform: translate(calc(-50% + 0.16em), -50%);
}

.about-stat__icon > i.ph-chats-circle {
    transform: translate(calc(-50% + 0.07em), -50%);
}

.about-stat__icon > i.ph-headset {
    transform: translate(calc(-50% + 0.11em), -50%);
}

/*
 * Value-card tiles: pin the 1em box, then optically shift by unused em-box
 * (Phosphor glyphs are left-aligned in the em). Measured at 30px.
 */
.about-value-card__icon > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.13em), -50%);
}

.about-value-card__icon > i.ph-arrows-clockwise {
    transform: translate(calc(-50% + 0.13em), calc(-50% + 0.03em));
}

.about-value-card__icon > i.ph-lightning {
    transform: translate(calc(-50% + 0.17em), -50%);
}

.about-value-card__icon > i.ph-archive {
    transform: translate(calc(-50% + 0.07em), -50%);
}

.about-value-card__icon > i.ph-user-circle-check {
    transform: translate(calc(-50% + 0.08em), calc(-50% + 0.03em));
}

.about-value-card__icon > i.ph-headset {
    transform: translate(calc(-50% + 0.1em), -50%);
}

/*
 * Timeline circles: pin the 1em box to the wrap center, then optically
 * shift by half the unused em-box (Phosphor glyphs are left-aligned in the em).
 */
.about-timeline__marker > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.1em), -50%);
}

.about-timeline__marker > i.ph-device-mobile {
    transform: translate(calc(-50% + 0.23em), calc(-50% + 0.04em));
}

.about-timeline__marker > i.ph-users-three {
    transform: translate(calc(-50% + 0.04em), -50%);
}

.about-btn > i.ph-duotone,
.about-hero__trust-item > i.ph-duotone {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transform: none;
    vertical-align: middle;
}

/*
 * Desktop sidebar nav tiles: pin the 1em box; optical shift is measured
 * per glyph. Nudge stays on `i` — the wrap scales on hover.
 */
.desktop-sidebar-nav__icon {
    position: relative;
}

.desktop-sidebar-nav__icon > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.03em), calc(-50% + 0.03em));
}

.desktop-sidebar-nav__icon > i.ph-checkerboard {
    transform: translate(calc(-50% + 0.13em), calc(-50% + 0.03em));
}

.desktop-sidebar-nav__icon > i.ph-cards-three {
    transform: translate(calc(-50% + 0.13em), calc(-50% + 0.05em));
}

.desktop-sidebar-nav__icon > i.ph-magnifying-glass {
    transform: translate(calc(-50% + 0.1em), -50%);
}

/*
 * Legal hero tile: pin the 1em box; optical shift is measured per glyph
 * (DMCA copyright / privacy shield share this wrap).
 */
.legal-hero__icon {
    position: relative;
}

.legal-hero__icon > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.09em), calc(-50% - 0.03em));
}

.legal-hero__icon > i.ph-shield-check {
    transform: translate(calc(-50% + 0.12em), -50%);
}

.legal-hero__updated > i.ph-duotone {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transform: none;
    vertical-align: middle;
}

.legal-hero__updated > i.ph-clock-counter-clockwise {
    transform: translate(0.06em, 0);
}

/*
 * Legal CTA: pin the question tile; button glyphs stay in-flow (btn hover
 * animates transform on the wrap).
 */
.legal-cta__icon {
    position: relative;
}

.legal-cta__icon > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.11em), -50%);
}

.legal-btn > i.ph-duotone {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transform: none;
    vertical-align: middle;
}

.legal-btn > i.ph-headset {
    transform: translate(0.06em, -0.03em);
}

/*
 * Desktop footer social tiles: pin the 1em box; nudge stays on `i`
 * because the wrap translates on hover.
 */
.desktop-footer__social-link {
    position: relative;
}

.desktop-footer__social-link > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.05em), calc(-50% + 0.03em));
}

.desktop-footer__social-link > i.ph-instagram-logo {
    transform: translate(calc(-50% + 0.08em), -50%);
}

.desktop-footer__social-link > i.ph-x-logo {
    transform: translate(calc(-50% + 0.16em), calc(-50% + 0.03em));
}

/*
 * Contact social panel: pin the 1em box; optical shift is measured per glyph.
 * Nudge stays on `i` — `.social-card` translates on hover.
 */
.contact-panel__head-icon > i.ph-duotone,
.social-card__icon > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.1em), -50%);
    z-index: 1;
}

.contact-panel__head-icon > i.ph-lightning {
    transform: translate(calc(-50% + 0.15em), -50%);
}

.social-card__icon > i.ph-telegram-logo {
    transform: translate(calc(-50% + 0.05em), -50%);
}

/*
 * Contact form field tiles: pin the 1em box; optical shift is measured
 * per glyph. Nudge stays on `i` — the wrap scales on focus.
 */
.contact-form__control-icon > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.09em), -50%);
}

.contact-form__control-icon > i.ph-device-mobile {
    transform: translate(calc(-50% + 0.21em), -50%);
}

.contact-form__control-icon > i.ph-tag {
    transform: translate(calc(-50% + 0.06em), calc(-50% - 0.02em));
}

.contact-form__control-icon > i.ph-chat-text {
    transform: translate(calc(-50% + 0.09em), calc(-50% - 0.05em));
}

/*
 * Contact hero: pin the headset tile; trust-pill glyphs stay in-flow
 * because the pill translates on hover.
 */
.contact-hero__badge > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.1em), calc(-50% - 0.03em));
    z-index: 1;
}

.contact-hero__trust-item > i.ph-duotone {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transform: translate(0.1em, 0);
    vertical-align: middle;
}

.contact-hero__trust-item > i.ph-clock-countdown {
    transform: translate(0.07em, -0.03em);
}

.contact-hero__trust-item > i.ph-headset {
    transform: translate(0.1em, -0.02em);
}

/*
 * Contact quick-action tiles: pin the 1em box; optical shift is measured
 * per glyph. Nudge stays on `i` — the row and go-circle translate on hover.
 */
.contact-quick__icon > i.ph-duotone,
.contact-quick__go > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    transform: translate(calc(-50% + 0.1em), -50%);
}

.contact-quick__icon > i.ph-telegram-logo {
    transform: translate(calc(-50% + 0.07em), -50%);
}

.contact-quick__go > i.ph-arrow-left {
    transform: translate(calc(-50% + 0.18em), -50%);
}

/*
 * Archive notes squares: in-flow 1em box (same as .menu-icon-circle).
 * Do not use absolute left/top:50% here — calc(-50% + 0) is invalid CSS,
 * transform drops, and the glyph sits in the bottom-right quadrant.
 */
.app-download-archive-notes__head-badge > i.ph-duotone,
.app-download-archive-notes__item-icon > i.ph-duotone {
    position: static;
    --ph-optical-x: var(--ph-optical-x-archive-notes);
    --ph-optical-y: var(--ph-optical-y-archive-notes);
}

.app-download-archive-download-zone__header-icon > i.ph-duotone,
.app-download-version-card__head-icon > i.ph-duotone {
    position: static;
    --ph-optical-x: var(--ph-optical-x-archive-chrome);
    --ph-optical-y: var(--ph-optical-y-archive-chrome);
}

.app-download-version-card__head-icon > i.ph-git-branch {
    --ph-optical-x: var(--ph-optical-x-version-branch);
    --ph-optical-y: var(--ph-optical-y-version-branch);
}

.menu-icon-circle > i.ph-duotone,
.menu-icon-circle > i.ph-fill,
.menu-icon-circle > i.ph-bold {
    --ph-optical-x: var(--ph-optical-x-sidebar-tile);
    --ph-optical-y: var(--ph-optical-y-sidebar-tile);
}

/* Per-glyph sidebar tiles (measured against .menu-icon-circle at 18px). */
.menu-icon-circle > i.ph-keyhole {
    --ph-optical-x: var(--ph-optical-x-sb-keyhole);
    --ph-optical-y: var(--ph-optical-y-sb-keyhole);
}

.menu-icon-circle > i.ph-user-circle {
    --ph-optical-x: var(--ph-optical-x-sb-user);
    --ph-optical-y: var(--ph-optical-y-sb-user);
}

.menu-icon-circle > i.ph-chat-teardrop-text {
    --ph-optical-x: var(--ph-optical-x-sb-chat);
    --ph-optical-y: var(--ph-optical-y-sb-chat);
}

.menu-icon-circle > i.ph-heart {
    --ph-optical-x: var(--ph-optical-x-sb-heart);
    --ph-optical-y: var(--ph-optical-y-sb-heart);
}

.menu-icon-circle > i.ph-users-four {
    --ph-optical-x: var(--ph-optical-x-sb-users);
    --ph-optical-y: var(--ph-optical-y-sb-users);
}

.menu-icon-circle > i.ph-envelope-simple {
    --ph-optical-x: var(--ph-optical-x-sb-envelope);
    --ph-optical-y: var(--ph-optical-y-sb-envelope);
}

.menu-icon-circle > i.ph-copyright {
    --ph-optical-x: var(--ph-optical-x-sb-copyright);
    --ph-optical-y: var(--ph-optical-y-sb-copyright);
}

.menu-icon-circle > i.ph-shield-check {
    --ph-optical-x: var(--ph-optical-x-sb-shield);
    --ph-optical-y: var(--ph-optical-y-sb-shield);
}

.menu-icon-circle > i.ph-arrows-counter-clockwise {
    --ph-optical-x: var(--ph-optical-x-sb-arrows);
    --ph-optical-y: var(--ph-optical-y-sb-arrows);
}

.menu-icon-circle > i.ph-bell-ringing {
    --ph-optical-x: var(--ph-optical-x-sb-bell);
    --ph-optical-y: var(--ph-optical-y-sb-bell);
}

.menu-icon-circle > i.ph-moon {
    --ph-optical-x: var(--ph-optical-x-sb-moon);
    --ph-optical-y: var(--ph-optical-y-sb-moon);
}

/*
 * HTTP error circle: pin the 1em glyph box to the wrap center.
 * Optical translate on a grid-centered `i` shifts the whole box (seen
 * as left-of-center). Same contract as .about-stat__icon.
 */
.http-error__icon {
    position: relative;
}

.http-error__icon > i.ph-duotone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    min-width: 0;
    max-width: 1em;
    margin: 0;
    /* Do not add a unitless 0 to the % calc — the transform is dropped. */
    transform: translate(calc(-50% + 0.12em), -50%);
}

.http-error__icon > i.ph-binoculars {
    transform: translate(calc(-50% + 0.1em), -50%);
}

.http-error__icon > i.ph-lock-key {
    transform: translate(calc(-50% + 0.1em), calc(-50% + 0.04em));
}

.http-error__icon > i.ph-warning {
    transform: translate(calc(-50% + 0.1em), calc(-50% + 0.04em));
}