/*
  OuinOual shared platform icons — monoline, Simple Icons path set.
  Self-contained: does not import or extend any other stylesheet.
  Every custom property is prefixed --oq- (same convention as
  ouinoual-ds.css) to avoid collision with ouinoual-design-system.css's
  five :root blocks.

  Deliberately kept separate from ouinoual-ds.css: a page can use these
  six icons without joining the broader design-system pilot (dark-mode
  token remap, spacing scale, mobile touch targets, auth-shell layout,
  etc.). See docs/brain/30-gaps/33-decisions.md.

  Source: Simple Icons (https://simpleicons.org), official path data,
  fetched directly — not hand-approximated. Three of the six paths
  previously in this codebase (Facebook, Instagram, WhatsApp) were
  simplified, non-canonical glyphs from an unknown source; YouTube,
  Telegram, and TikTok already matched Simple Icons byte-for-byte. All
  six are now sourced identically, so all six share one visual
  language and one stroke/fill treatment.

  Linked from: accounts.html, create-post.html, index.html.
*/

:root {
  --oq-icon-facebook: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTkuMTAxIDIzLjY5MXYtNy45OEg2LjYyN3YtMy42NjdoMi40NzR2LTEuNThjMC00LjA4NSAxLjg0OC01Ljk3OCA1Ljg1OC01Ljk3OC40MDEgMCAuOTU1LjA0MiAxLjQ2OC4xMDNhOC42OCA4LjY4IDAgMCAxIDEuMTQxLjE5NXYzLjMyNWE4LjYyMyA4LjYyMyAwIDAgMC0uNjUzLS4wMzYgMjYuODA1IDI2LjgwNSAwIDAgMC0uNzMzLS4wMDljLS43MDcgMC0xLjI1OS4wOTYtMS42NzUuMzA5YTEuNjg2IDEuNjg2IDAgMCAwLS42NzkuNjIyYy0uMjU4LjQyLS4zNzQuOTk1LS4zNzQgMS43NTJ2MS4yOTdoMy45MTlsLS4zODYgMi4xMDMtLjI4NyAxLjU2NGgtMy4yNDZ2OC4yNDVDMTkuMzk2IDIzLjIzOCAyNCAxOC4xNzkgMjQgMTIuMDQ0YzAtNi42MjctNS4zNzMtMTItMTItMTJzLTEyIDUuMzczLTEyIDEyYzAgNS42MjggMy44NzQgMTAuMzUgOS4xMDEgMTEuNjQ3WiIvPjwvc3ZnPgo=");
  --oq-icon-instagram: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcuMDMwMS4wODRjLTEuMjc2OC4wNjAyLTIuMTQ4Ny4yNjQtMi45MTEuNTYzNC0uNzg4OC4zMDc1LTEuNDU3NS43Mi0yLjEyMjggMS4zODc3LS42NjUyLjY2NzctMS4wNzUgMS4zMzY4LTEuMzgwMiAyLjEyNy0uMjk1NC43NjM4LS40OTU2IDEuNjM2NS0uNTUyIDIuOTE0LS4wNTY0IDEuMjc3NS0uMDY4OSAxLjY4ODItLjA2MjYgNC45NDcuMDA2MiAzLjI1ODYuMDIwNiAzLjY2NzEuMDgyNSA0Ljk0NzMuMDYxIDEuMjc2NS4yNjQgMi4xNDgyLjU2MzUgMi45MTA3LjMwOC43ODg5LjcyIDEuNDU3MyAxLjM4OCAyLjEyMjguNjY3OS42NjU1IDEuMzM2NSAxLjA3NDMgMi4xMjg1IDEuMzguNzYzMi4yOTUgMS42MzYxLjQ5NjEgMi45MTM0LjU1MiAxLjI3NzMuMDU2IDEuNjg4NC4wNjkgNC45NDYyLjA2MjcgMy4yNTc4LS4wMDYyIDMuNjY4LS4wMjA3IDQuOTQ3OC0uMDgxNCAxLjI4LS4wNjA3IDIuMTQ3LS4yNjUyIDIuOTA5OC0uNTYzMy43ODg5LS4zMDg2IDEuNDU3OC0uNzIgMi4xMjI4LTEuMzg4MS42NjUtLjY2ODIgMS4wNzQ1LTEuMzM3OCAxLjM3OTUtMi4xMjg0LjI5NTctLjc2MzIuNDk2Ni0xLjYzNi41NTItMi45MTI0LjA1Ni0xLjI4MDkuMDY5Mi0xLjY4OTguMDYzLTQuOTQ4LS4wMDYzLTMuMjU4My0uMDIxLTMuNjY2OC0uMDgxNy00Ljk0NjUtLjA2MDctMS4yNzk3LS4yNjQtMi4xNDg3LS41NjMzLTIuOTExNy0uMzA4NC0uNzg4OS0uNzItMS40NTY4LTEuMzg3Ni0yLjEyMjhDMjEuMjk4MiAxLjMzIDIwLjYyOC45MjA4IDE5LjgzNzguNjE2NSAxOS4wNzQuMzIxIDE4LjIwMTcuMTE5NyAxNi45MjQ0LjA2NDUgMTUuNjQ3MS4wMDkzIDE1LjIzNi0uMDA1IDExLjk3Ny4wMDE0IDguNzE4LjAwNzYgOC4zMS4wMjE1IDcuMDMwMS4wODM5bS4xNDAyIDIxLjY5MzJjLTEuMTctLjA1MDktMS44MDUzLS4yNDUzLTIuMjI4Ny0uNDA4LS41NjA2LS4yMTYtLjk2LS40NzcxLTEuMzgxOS0uODk1LS40MjItLjQxNzgtLjY4MTEtLjgxODYtLjktMS4zNzgtLjE2NDQtLjQyMzQtLjM2MjQtMS4wNTgtLjQxNzEtMi4yMjgtLjA1OTUtMS4yNjQ1LS4wNzItMS42NDQyLS4wNzktNC44NDgtLjAwNy0zLjIwMzcuMDA1My0zLjU4My4wNjA3LTQuODQ4LjA1LTEuMTY5LjI0NTYtMS44MDUuNDA4LTIuMjI4Mi4yMTYtLjU2MTMuNDc2Mi0uOTYuODk1LTEuMzgxNi40MTg4LS40MjE3LjgxODQtLjY4MTQgMS4zNzgzLS45MDAzLjQyMy0uMTY1MSAxLjA1NzUtLjM2MTQgMi4yMjctLjQxNzEgMS4yNjU1LS4wNiAxLjY0NDctLjA3MiA0Ljg0OC0uMDc5IDMuMjAzMy0uMDA3IDMuNTgzNS4wMDUgNC44NDk1LjA2MDggMS4xNjkuMDUwOCAxLjgwNTMuMjQ0NSAyLjIyOC40MDguNTYwOC4yMTYuOTYuNDc1NCAxLjM4MTYuODk1LjQyMTcuNDE5NC42ODE2LjgxNzYuOTAwNSAxLjM3ODcuMTY1My40MjE3LjM2MTcgMS4wNTYuNDE2OSAyLjIyNjMuMDYwMiAxLjI2NTUuMDczOSAxLjY0NS4wNzk2IDQuODQ4LjAwNTggMy4yMDMtLjAwNTUgMy41ODM0LS4wNjEgNC44NDgtLjA1MSAxLjE3LS4yNDUgMS44MDU1LS40MDggMi4yMjk0LS4yMTYuNTYwNC0uNDc2My45Ni0uODk1NCAxLjM4MTQtLjQxOS40MjE1LS44MTgxLjY4MTEtMS4zNzgzLjktLjQyMjQuMTY0OS0xLjA1NzcuMzYxNy0yLjIyNjIuNDE3NC0xLjI2NTYuMDU5NS0xLjY0NDguMDcyLTQuODQ5My4wNzktMy4yMDQ1LjAwNy0zLjU4MjUtLjAwNi00Ljg0OC0uMDYwOE0xNi45NTMgNS41ODY0QTEuNDQgMS40NCAwIDEgMCAxOC4zOSA0LjE0NGExLjQ0IDEuNDQgMCAwIDAtMS40MzcgMS40NDI0TTUuODM4NSAxMi4wMTJjLjAwNjcgMy40MDMyIDIuNzcwNiA2LjE1NTcgNi4xNzMgNi4xNDkzIDMuNDAyNi0uMDA2NSA2LjE1Ny0yLjc3MDEgNi4xNTA2LTYuMTczMy0uMDA2NS0zLjQwMzItMi43NzEtNi4xNTY1LTYuMTc0LTYuMTQ5OC0zLjQwMy4wMDY3LTYuMTU2IDIuNzcxLTYuMTQ5NiA2LjE3MzhNOCAxMi4wMDc3YTQgNCAwIDEgMSA0LjAwOCAzLjk5MjFBMy45OTk2IDMuOTk5NiAwIDAgMSA4IDEyLjAwNzciLz48L3N2Zz4K");
  --oq-icon-youtube: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIzLjQ5OCA2LjE4NmEzLjAxNiAzLjAxNiAwIDAgMC0yLjEyMi0yLjEzNkMxOS41MDUgMy41NDUgMTIgMy41NDUgMTIgMy41NDVzLTcuNTA1IDAtOS4zNzcuNTA1QTMuMDE3IDMuMDE3IDAgMCAwIC41MDIgNi4xODZDMCA4LjA3IDAgMTIgMCAxMnMwIDMuOTMuNTAyIDUuODE0YTMuMDE2IDMuMDE2IDAgMCAwIDIuMTIyIDIuMTM2YzEuODcxLjUwNSA5LjM3Ni41MDUgOS4zNzYuNTA1czcuNTA1IDAgOS4zNzctLjUwNWEzLjAxNSAzLjAxNSAwIDAgMCAyLjEyMi0yLjEzNkMyNCAxNS45MyAyNCAxMiAyNCAxMnMwLTMuOTMtLjUwMi01LjgxNHpNOS41NDUgMTUuNTY4VjguNDMyTDE1LjgxOCAxMmwtNi4yNzMgMy41Njh6Ii8+PC9zdmc+Cg==");
  --oq-icon-whatsapp: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjQ3MiAxNC4zODJjLS4yOTctLjE0OS0xLjc1OC0uODY3LTIuMDMtLjk2Ny0uMjczLS4wOTktLjQ3MS0uMTQ4LS42Ny4xNS0uMTk3LjI5Ny0uNzY3Ljk2Ni0uOTQgMS4xNjQtLjE3My4xOTktLjM0Ny4yMjMtLjY0NC4wNzUtLjI5Ny0uMTUtMS4yNTUtLjQ2My0yLjM5LTEuNDc1LS44ODMtLjc4OC0xLjQ4LTEuNzYxLTEuNjUzLTIuMDU5LS4xNzMtLjI5Ny0uMDE4LS40NTguMTMtLjYwNi4xMzQtLjEzMy4yOTgtLjM0Ny40NDYtLjUyLjE0OS0uMTc0LjE5OC0uMjk4LjI5OC0uNDk3LjA5OS0uMTk4LjA1LS4zNzEtLjAyNS0uNTItLjA3NS0uMTQ5LS42NjktMS42MTItLjkxNi0yLjIwNy0uMjQyLS41NzktLjQ4Ny0uNS0uNjY5LS41MS0uMTczLS4wMDgtLjM3MS0uMDEtLjU3LS4wMS0uMTk4IDAtLjUyLjA3NC0uNzkyLjM3Mi0uMjcyLjI5Ny0xLjA0IDEuMDE2LTEuMDQgMi40NzkgMCAxLjQ2MiAxLjA2NSAyLjg3NSAxLjIxMyAzLjA3NC4xNDkuMTk4IDIuMDk2IDMuMiA1LjA3NyA0LjQ4Ny43MDkuMzA2IDEuMjYyLjQ4OSAxLjY5NC42MjUuNzEyLjIyNyAxLjM2LjE5NSAxLjg3MS4xMTguNTcxLS4wODUgMS43NTgtLjcxOSAyLjAwNi0xLjQxMy4yNDgtLjY5NC4yNDgtMS4yODkuMTczLTEuNDEzLS4wNzQtLjEyNC0uMjcyLS4xOTgtLjU3LS4zNDdtLTUuNDIxIDcuNDAzaC0uMDA0YTkuODcgOS44NyAwIDAxLTUuMDMxLTEuMzc4bC0uMzYxLS4yMTQtMy43NDEuOTgyLjk5OC0zLjY0OC0uMjM1LS4zNzRhOS44NiA5Ljg2IDAgMDEtMS41MS01LjI2Yy4wMDEtNS40NSA0LjQzNi05Ljg4NCA5Ljg4OC05Ljg4NCAyLjY0IDAgNS4xMjIgMS4wMyA2Ljk4OCAyLjg5OGE5LjgyNSA5LjgyNSAwIDAxMi44OTMgNi45OTRjLS4wMDMgNS40NS00LjQzNyA5Ljg4NC05Ljg4NSA5Ljg4NG04LjQxMy0xOC4yOTdBMTEuODE1IDExLjgxNSAwIDAwMTIuMDUgMEM1LjQ5NSAwIC4xNiA1LjMzNS4xNTcgMTEuODkyYzAgMi4wOTYuNTQ3IDQuMTQyIDEuNTg4IDUuOTQ1TC4wNTcgMjRsNi4zMDUtMS42NTRhMTEuODgyIDExLjg4MiAwIDAwNS42ODMgMS40NDhoLjAwNWM2LjU1NCAwIDExLjg5LTUuMzM1IDExLjg5My0xMS44OTNhMTEuODIxIDExLjgyMSAwIDAwLTMuNDgtOC40MTNaIi8+PC9zdmc+Cg==");
  --oq-icon-telegram: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTExLjk0NCAwQTEyIDEyIDAgMCAwIDAgMTJhMTIgMTIgMCAwIDAgMTIgMTIgMTIgMTIgMCAwIDAgMTItMTJBMTIgMTIgMCAwIDAgMTIgMGExMiAxMiAwIDAgMC0uMDU2IDB6bTQuOTYyIDcuMjI0Yy4xLS4wMDIuMzIxLjAyMy40NjUuMTRhLjUwNi41MDYgMCAwIDEgLjE3MS4zMjVjLjAxNi4wOTMuMDM2LjMwNi4wMi40NzItLjE4IDEuODk4LS45NjIgNi41MDItMS4zNiA4LjYyNy0uMTY4LjktLjQ5OSAxLjIwMS0uODIgMS4yMy0uNjk2LjA2NS0xLjIyNS0uNDYtMS45LS45MDItMS4wNTYtLjY5My0xLjY1My0xLjEyNC0yLjY3OC0xLjgtMS4xODUtLjc4LS40MTctMS4yMS4yNTgtMS45MS4xNzctLjE4NCAzLjI0Ny0yLjk3NyAzLjMwNy0zLjIzLjAwNy0uMDMyLjAxNC0uMTUtLjA1Ni0uMjEycy0uMTc0LS4wNDEtLjI0OS0uMDI0Yy0uMTA2LjAyNC0xLjc5MyAxLjE0LTUuMDYxIDMuMzQ1LS40OC4zMy0uOTEzLjQ5LTEuMzAyLjQ4LS40MjgtLjAwOC0xLjI1Mi0uMjQxLTEuODY1LS40NC0uNzUyLS4yNDUtMS4zNDktLjM3NC0xLjI5Ny0uNzg5LjAyNy0uMjE2LjMyNS0uNDM3Ljg5My0uNjYzIDMuNDk4LTEuNTI0IDUuODMtMi41MjkgNi45OTgtMy4wMTQgMy4zMzItMS4zODYgNC4wMjUtMS42MjcgNC40NzYtMS42MzV6Ii8+PC9zdmc+Cg==");
  --oq-icon-tiktok: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLjUyNS4wMmMxLjMxLS4wMiAyLjYxLS4wMSAzLjkxLS4wMi4wOCAxLjUzLjYzIDMuMDkgMS43NSA0LjE3IDEuMTIgMS4xMSAyLjcgMS42MiA0LjI0IDEuNzl2NC4wM2MtMS40NC0uMDUtMi44OS0uMzUtNC4yLS45Ny0uNTctLjI2LTEuMS0uNTktMS42Mi0uOTMtLjAxIDIuOTIuMDEgNS44NC0uMDIgOC43NS0uMDggMS40LS41NCAyLjc5LTEuMzUgMy45NC0xLjMxIDEuOTItMy41OCAzLjE3LTUuOTEgMy4yMS0xLjQzLjA4LTIuODYtLjMxLTQuMDgtMS4wMy0yLjAyLTEuMTktMy40NC0zLjM3LTMuNjUtNS43MS0uMDItLjUtLjAzLTEtLjAxLTEuNDkuMTgtMS45IDEuMTItMy43MiAyLjU4LTQuOTYgMS42Ni0xLjQ0IDMuOTgtMi4xMyA2LjE1LTEuNzIuMDIgMS40OC0uMDQgMi45Ni0uMDQgNC40NC0uOTktLjMyLTIuMTUtLjIzLTMuMDIuMzctLjYzLjQxLTEuMTEgMS4wNC0xLjM2IDEuNzUtLjIxLjUxLS4xNSAxLjA3LS4xNCAxLjYxLjI0IDEuNjQgMS44MiAzLjAyIDMuNSAyLjg3IDEuMTItLjAxIDIuMTktLjY2IDIuNzctMS42MS4xOS0uMzMuNC0uNjcuNDEtMS4wNi4xLTEuNzkuMDYtMy41Ny4wNy01LjM2LjAxLTQuMDMtLjAxLTguMDUuMDItMTIuMDd6Ii8+PC9zdmc+Cg==");
}

/*
  Monoline platform icon. Single canvas (the parent .platform-icon
  tile sets width/height), inherits color from the surrounding element
  via `background-color: currentColor` masked by the icon shape — so
  it repaints automatically for light/dark mode with no per-theme rule
  and no hardcoded brand color. No icon font, no external request: the
  path data above is embedded directly in this stylesheet.
*/
.platform-icon-glyph {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 76%;
  mask-size: 76%;
}

.platform-icon-glyph.facebook { -webkit-mask-image: var(--oq-icon-facebook); mask-image: var(--oq-icon-facebook); }
.platform-icon-glyph.instagram { -webkit-mask-image: var(--oq-icon-instagram); mask-image: var(--oq-icon-instagram); }
.platform-icon-glyph.youtube { -webkit-mask-image: var(--oq-icon-youtube); mask-image: var(--oq-icon-youtube); }
.platform-icon-glyph.whatsapp { -webkit-mask-image: var(--oq-icon-whatsapp); mask-image: var(--oq-icon-whatsapp); }
.platform-icon-glyph.telegram { -webkit-mask-image: var(--oq-icon-telegram); mask-image: var(--oq-icon-telegram); }
.platform-icon-glyph.tiktok { -webkit-mask-image: var(--oq-icon-tiktok); mask-image: var(--oq-icon-tiktok); }

/*
  Optical sizing. All six source paths share a 24x24 viewBox, but not
  equal ink density — e.g. YouTube's solid rounded-rect reads visually
  larger than Telegram's circle-with-cutout at an identical box/mask
  size, and Instagram's thin outline and TikTok's slender mark read
  smaller than the filled shapes next to them. These per-icon overrides
  equalize APPARENT size, tuned by rendered screenshot comparison, not
  by measuring the viewBox (which is already equal and not the point).
*/
.platform-icon-glyph.youtube { -webkit-mask-size: 68%; mask-size: 68%; }
.platform-icon-glyph.instagram { -webkit-mask-size: 82%; mask-size: 82%; }
.platform-icon-glyph.telegram { -webkit-mask-size: 80%; mask-size: 80%; }
.platform-icon-glyph.tiktok { -webkit-mask-size: 80%; mask-size: 80%; }