/* Language picker for the policy pages: a flag pill that opens a list of the six languages.
   Used by /terms/, /privacy/, /copyright/, /ai-disclosure/ and /policies/ in every language (see lang-picker.js).
   Flags are inline SVG symbols (<symbol id="fl-xx">) at the top of each page's <body>. */
/* the inline flag sprite at the top of <body> takes no space */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.lp { --lp-e: cubic-bezier(0.22, 0.7, 0.2, 1); position: relative; display: inline-block; margin: 4px 0 clamp(20px, 4vw, 32px); }

.lp-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: rgba(242, 239, 232, .1); color: var(--muted, #A39C8E); font: inherit; cursor: pointer; transition: color .2s var(--lp-e), background .2s var(--lp-e); }
.lp-btn:hover, .lp-btn[aria-expanded="true"] { background: rgba(242, 239, 232, .18); color: var(--ink, #F2EFE8); }
.lp-btn:focus-visible { outline: 2px solid var(--accent, #B23A2E); outline-offset: 3px; color: var(--ink, #F2EFE8); }

.lp-flag, .lr-flag { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; }
.lp-flag::after, .lr-flag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 239, 232, .2); pointer-events: none; }
.lp-flag svg, .lr-flag svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* picking a language: the current flag rolls up and out, the new one rolls in from below, then the page changes */
.lp-flag svg { transition: transform 420ms var(--lp-e), opacity 280ms var(--lp-e); }
.lp-next { transform: translate3d(0, 115%, 0); opacity: 0; }
.lp-btn.swap .lp-cur { transform: translate3d(0, -115%, 0); opacity: 0; }
.lp-btn.swap .lp-next { transform: none; opacity: 1; }
.lp-chev { display: block; width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 420ms var(--lp-e); }
.lp-btn[aria-expanded="true"] .lp-chev { transform: rotate(180deg); }

/* the list drops out of the pill, then the rows sharpen in one after another */
.lp-panel { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-start: 0; min-width: 232px; max-height: min(340px, 60vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 6px; border: 1px solid rgba(242, 239, 232, .12); border-radius: 16px; background: rgba(23, 21, 15, .98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0) scale(.97); transform-origin: top left; transition: opacity 140ms var(--lp-e), transform 180ms var(--lp-e), visibility 0s 180ms; }
html[dir="rtl"] .lp-panel { transform-origin: top right; }
.lp-panel::-webkit-scrollbar { display: none; }
.lp-panel.open { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms var(--lp-e), transform 380ms var(--lp-e), visibility 0s; }

.lp-panel a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink, #F2EFE8); font-size: var(--fs-sm, .875rem); font-weight: var(--fw-medium, 500); text-decoration: none;
  opacity: 0; filter: blur(6px); transform: translate3d(0, -6px, 0); transition: opacity 120ms var(--lp-e), filter 120ms var(--lp-e), transform 120ms var(--lp-e), background .2s var(--lp-e); }
.lp-panel.open a { opacity: 1; filter: none; transform: none;
  transition: opacity 320ms var(--lp-e) calc(80ms + var(--j, 0) * 40ms), filter 360ms var(--lp-e) calc(80ms + var(--j, 0) * 40ms), transform 420ms var(--lp-e) calc(80ms + var(--j, 0) * 40ms), background .2s var(--lp-e); }
.lp-panel a:nth-child(2) { --j: 1; } .lp-panel a:nth-child(3) { --j: 2; } .lp-panel a:nth-child(4) { --j: 3; } .lp-panel a:nth-child(5) { --j: 4; } .lp-panel a:nth-child(n+6) { --j: 5; }
.lp-panel a:hover, .lp-panel a:focus-visible { background: rgba(242, 239, 232, .1); outline: none; }
.lp-panel a:focus-visible { box-shadow: inset 0 0 0 2px rgba(242, 239, 232, .5); }
.lp-panel a[aria-checked="true"]::after { content: ""; flex: none; width: 12px; height: 12px; margin-inline-start: auto; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.3 2.3L9.5 3.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.3 2.3L9.5 3.8'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (prefers-reduced-motion: reduce) {
  .lp-panel, .lp-panel.open, .lp-panel a, .lp-panel.open a, .lp-flag svg, .lp-chev { transition: none; filter: none; }
}

/* Without JavaScript the pill cannot open, so the languages are simply shown as a row of links. */
@media (scripting: none) {
  .lp-btn { display: none; }
  .lp-panel { position: static; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-height: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none; }
  .lp-panel a { min-height: 40px; padding: 0 14px 0 8px; border: 1px solid rgba(242, 239, 232, .18); border-radius: 999px; color: var(--muted, #A39C8E); opacity: 1; filter: none; transform: none; }
  .lp-panel a[aria-checked="true"] { color: var(--ink, #F2EFE8); background: rgba(242, 239, 232, .08); }
  .lp-panel a[aria-checked="true"]::after { display: none; }
}