/* next-time.com — the language menu, shared by every page in every language. */
.flag { display: inline-block; flex: none; width: 1.2em; height: .8em; margin-right: .5em; vertical-align: -.05em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128,128,128,.35); }
header.site { position: relative; z-index: 20; }
.langs { position: relative; font-size: .95rem; }
main > .langs { float: right; font-size: .9rem; }
.langs summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; color: var(--muted); white-space: nowrap; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: ""; width: .38em; height: .38em; margin-left: .5em; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-.12em) rotate(45deg); }
.langs[open] summary, .langs summary:hover { color: var(--fg); }
.langs ul { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; margin: 0; padding: .35rem; list-style: none; min-width: 10.5rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.18); }
.langs li { margin: 0; }
.langs li a { display: flex; align-items: center; padding: .45rem .65rem; border-radius: 8px; color: var(--fg); text-decoration: none; white-space: nowrap; }
.langs li a:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.langs li a[aria-current] { font-weight: 600; }
.app-lang-note { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }
.updated + .app-lang-note { margin: -2rem 0 2.5rem; }
@media (max-width: 30rem) { header.site .langs-name { display: none; } header.site .langs summary .flag { margin-right: 0; } }