/* The language menu (in the header's slot) and the small status note of page translation (/i18n/client.mjs). */
.hdr-language{display:flex;align-items:center;flex:none}
.hdr-language:empty{display:none}
.atv-language{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;height:36px;padding:0 4px 0 12px;border:1px solid var(--line-3,#353028);border-radius:999px;background:transparent;font:600 12px/1 var(--font,sans-serif);color:var(--ink-2,#c7c1b8);transition:border-color .18s,color .18s}
.atv-language:hover,.atv-language:focus-within{border-color:var(--accent-line,rgba(224,145,106,.45));color:var(--ink,#f5f3f0)}
.atv-language[hidden]{display:none}
.atv-language .language-symbol{font-size:14px;line-height:1;filter:grayscale(1) brightness(1.3);opacity:.75}
.atv-language select{font:inherit;color:inherit;background:transparent;border:0;border-radius:999px;padding:0 6px 0 2px;width:104px;max-width:30vw;height:100%;min-height:0;cursor:pointer;color-scheme:dark}
.atv-language select option{background:var(--surface,#11100d);color:var(--ink,#f5f3f0)}
.atv-language select:focus-visible{outline:none}
.atv-language:focus-within{box-shadow:0 0 0 2px var(--accent-soft,rgba(224,145,106,.12))}
.atv-language-floating{position:fixed;top:12px;right:16px;z-index:60}
.atv-language-status{position:fixed;right:16px;bottom:16px;z-index:70;max-width:min(360px,85vw);margin:0;padding:10px 14px;border:1px solid var(--line-2,#2a2620);border-radius:var(--radius-sm,10px);background:var(--surface,#11100d);color:var(--ink-2,#c7c1b8);box-shadow:var(--shadow-deep,0 30px 80px -24px rgba(0,0,0,.9));font:13px/1.5 var(--font,sans-serif)}
.atv-language-status:empty{display:none}
.atv-language-status button{font:inherit;color:var(--accent,#e0916a);background:transparent;border:1px solid var(--accent-line,rgba(224,145,106,.45));border-radius:999px;padding:5px 12px;margin-top:6px;cursor:pointer}
/* Non-blocking progress: a small spinner and one word in the bottom-left corner, never over the picture. */
.atv-language-status.is-loading{inset:auto auto 12px 12px;padding:0 0 0 30px;min-height:22px;max-width:min(220px,60vw);border:0;background:transparent;box-shadow:none;pointer-events:none;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.atv-language-status.is-loading>span{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--surface,#11100d);color:var(--muted,#8a8378)}
.atv-language-status.is-loading::after{content:"";position:absolute;top:0;left:0;width:22px;height:22px;box-sizing:border-box;border:2px solid var(--line-3,#353028);border-top-color:var(--accent,#e0916a);border-radius:50%;animation:atv-language-spin 1.1s linear infinite}
@keyframes atv-language-spin{to{transform:rotate(360deg)}}
/* Below 1024px the header has no room for a select beside the search field: only the globe, a 36px ring like the
   header's other round buttons; the select lies over it, unseen but tappable. */
@media (max-width:1023px){
  .atv-language{position:relative;width:36px;height:36px;padding:0;justify-content:center}
  .atv-language .language-symbol{display:block;font-size:16px}
  .atv-language select{position:absolute;inset:0;width:100%;height:100%;max-width:none;min-height:0;padding:0;opacity:0}
}
@media (max-width:759px){.hdr-chip{max-width:150px}}
/* Up to 599px the row has no room for the upload label and the channel name next to the globe: icons only, as the
   phone layout already does (the label stays the link's name for screen readers). */
@media (max-width:599px){
  .hdr-upload{width:36px;padding:0}
  .hdr-upload-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hdr-chip{padding:0 3px;max-width:none}
  .hdr-chip-name{display:none}
}
/* The globe takes one more slot in the row: tighten the gaps and the wordmark so the row stays one line. */
@media (max-width:479px){
  .hdr-row{gap:4px}
  .hdr-actions{gap:4px}
  .hdr-login{padding:0 11px}
}
@media (max-width:419px){
  .hdr-row{padding:0 10px}
  .hdr-brand{gap:6px}
  .hdr-name{font-size:11px;letter-spacing:1.5px}
  .hdr-search-open{width:34px}
}
@media (max-width:359px){
  .hdr-row{padding:0 8px;gap:2px}
  .hdr-actions{gap:2px}
  .hdr-name{font-size:11px;letter-spacing:1px}
  .hdr-search-open{width:32px;height:36px}
  .hdr-upload,.atv-language{width:32px;height:32px;min-height:32px}
  .hdr-login{padding:0 8px;min-height:32px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.atv-language-status.is-loading::after{animation:none;border-style:dotted}}