/* Language chooser of the homepage and the account pages: a native disclosure; the panel borrows the
   Dropdown surface roles and lists the locales in two columns, scrolling under an edge shade once it outgrows the viewport.
   The note rule, and the code-label rules at the end, serve every customer language chooser and read-only language value, not only these two. */
.lang-chooser, .lang-chooser *, .lang-chooser *::before, .lang-chooser *::after { box-sizing: border-box; }
.lang-chooser-trigger { white-space: nowrap; }
.lang-chooser { position: relative; }
.lang-chooser-trigger { display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--touch-web); padding-inline: 0.75rem; border-radius: var(--radius-md); font-weight: 600; cursor: pointer; list-style: none; }
.lang-chooser-trigger::-webkit-details-marker { display: none; }
.account-lang-bar .lang-chooser-trigger { color: var(--color-neutral-700); }
.account-lang-bar .lang-chooser-trigger:hover { background: var(--color-neutral-50); }
.lang-chooser[open] .c1-lang-chevron { transform: rotate(180deg); }
.lang-chooser-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); z-index: 15; width: min(20rem, calc(100vw - 2rem)); max-height: max(12rem, calc(100vh - var(--lang-chooser-offset) - 1rem)); overflow-y: auto; padding: 0.25rem; background: linear-gradient(var(--color-surface-raised) 30%, transparent) top / 100% 2.5rem no-repeat local, linear-gradient(transparent, var(--color-surface-raised) 70%) bottom / 100% 2.5rem no-repeat local, linear-gradient(var(--color-neutral-300), transparent) top / 100% 0.75rem no-repeat scroll, linear-gradient(transparent, var(--color-neutral-300)) bottom / 100% 0.75rem no-repeat scroll, var(--color-surface-raised); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); box-shadow: var(--elevation-dropdown); }
@supports (height: 100dvh) {
  .lang-chooser-panel { max-height: max(12rem, calc(100dvh - var(--lang-chooser-offset) - 1rem)); }
}
.lang-chooser-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; }
.lang-chooser-panel .c1-lang-link { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; min-height: var(--touch-web); padding-inline: 0.75rem; border-radius: var(--radius-sm); color: var(--color-neutral-700); opacity: 1; font-weight: 400; text-decoration: none; }
.lang-chooser-panel .c1-lang-link:hover { background: var(--color-neutral-50); }
.lang-chooser-panel .c1-lang-link-current { color: var(--color-accent-primary); font-weight: 600; }
.lang-chooser-note { margin: 0.25rem 0 0; padding: 0.5rem 0.75rem 0.25rem; border-top: 1px solid var(--color-neutral-200); color: var(--color-neutral-600); font-size: var(--type-caption-size); line-height: var(--type-caption-leading); }
:is(.lang-chooser-trigger, .lang-chooser-panel .c1-lang-link):focus-visible { outline: 2px solid var(--button-focus-ring); outline-offset: 2px; }
/* Account pages: the chooser has its own row above the card, at the inline end. The row is what
   the panel anchors to at narrow widths, and its height is what the panel's height bound subtracts. */
.account-lang-bar { position: relative; z-index: 2; align-self: stretch; display: flex; justify-content: flex-end; padding: 1rem 1rem 0; --lang-chooser-offset: calc(var(--touch-web) + 1rem); }
@media (max-width: 1200px) {
  .lang-chooser { position: static; }
  .account-lang-bar .lang-chooser-panel { inset-inline-end: 1rem; }
}
@media (max-width: 767px) {
  .lang-chooser-panel { inset-inline: 1rem; width: auto; }
  .lang-chooser-panel .c1-lang-link { padding-inline: 0.5rem; }
}
.c1-lang-link .c1-lang-code, .c1-lang-switcher-option .c1-lang-code, .c1-lang-value .c1-lang-code { flex: none; inline-size: 1.25rem; margin-inline-end: -0.25rem; font-size: var(--type-caption-size); line-height: var(--type-caption-leading); font-weight: 600; letter-spacing: 0.04em; color: var(--color-neutral-500); }
.c1-lang-link-current .c1-lang-code, .c1-lang-switcher-option[aria-checked="true"] .c1-lang-code { color: inherit; }
.c1-lang-link > .msi-xs { margin-inline-start: -0.25rem; }
.c1-lang-value { display: inline-flex; align-items: center; gap: 0.5rem; }