/* Spectra Free Editor language picker
   Project listbox/popover built on the native select state source. Presentation
   values are named locally; runtime viewport placement lives in the JS config. */

body.sp-app-shell.sv-freeEditor{
  --sv-language-picker-min-w:8.25rem;
  --sv-language-picker-chevron-col:calc(var(--sp-5,1.25rem) + var(--sp-border-w-2,2px));
  --sv-language-picker-chevron-col-mobile:calc(var(--sp-6,1.5rem) + var(--sp-border-w-2,2px));
  --sv-language-picker-chevron-fs:1.05em;
  --sv-language-picker-chevron-shift:-.24em;
  --sv-language-picker-chevron-shift-compact:-.08em;
  --sv-language-picker-menu-preferred-w:14rem;
  --sv-language-picker-menu-mobile-w:18rem;
  --sv-language-picker-menu-max-h:22rem;
  --sv-language-picker-option-check-col:1.25rem;
  --sv-language-picker-option-min-h:calc(var(--sv-preview-control-min-height,var(--sp-8,2rem)) + var(--sp-border-w-2,2px));
  --sv-language-picker-menu-shadow:0 1.1rem 2.5rem color-mix(in srgb,#000,transparent 52%);
  --sv-language-picker-focus-outline:var(--sp-outline-1,var(--sp-border-w-2,2px));
  --sv-language-picker-focus-offset:var(--sp-border-w-2,2px);
  --sv-language-picker-tablet-h:var(--sp-10,2.5rem);
  --sv-language-picker-tablet-pad-y:calc(var(--sp-1,.25rem) + var(--sp-border-w-1,1px) + .0625rem);
  --sv-language-picker-tablet-lh:1.2;
}

body.sv-freeEditor .sv-languageField{
  position:relative;
}

body.sv-freeEditor .sv-languageSelect--nativeHidden{
  position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  clip-path:inset(50%) !important;
}

body.sv-freeEditor .sv-languagePickerButton{
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  inline-size:auto;
  min-inline-size:var(--sv-language-picker-min-w);
  block-size:var(--sv-preview-control-min-height,calc(var(--sp-7,1.75rem) + var(--sp-border-w-2,2px)));
  min-block-size:var(--sv-preview-control-min-height,calc(var(--sp-7,1.75rem) + var(--sp-border-w-2,2px)));
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--sv-language-picker-chevron-col);
  align-items:center;
  justify-content:normal;
  column-gap:var(--sp-2,.5rem);
  padding-block:var(--sv-preview-control-pad-block,var(--sp-1,.25rem));
  padding-inline:var(--sv-preview-control-pad-inline,var(--sp-3,.75rem));
  border:var(--sp-border-w-1,1px) solid var(--sv-preview-action-border,color-mix(in srgb,var(--sv-blue,#67d8ff),transparent 58%));
  border-radius:var(--sv-preview-control-radius,var(--sp-radius-3,1rem));
  background:var(--sv-preview-action-bg,color-mix(in srgb,var(--sp-surface-2,var(--sp-surface,#111827)),var(--sv-blue,#67d8ff) 10%));
  color:var(--sp-text,#f6fbff);
  font:inherit;
  font-size:var(--sv-preview-control-fs,var(--sp-fs-1,.875rem));
  font-weight:var(--sp-fw-semibold,650);
  line-height:var(--sv-preview-control-lh,var(--sp-lh-1,1));
  text-align:start;
  cursor:pointer;
  box-shadow:inset 0 var(--sp-border-w-1,1px) 0 var(--sv-line-light-soft,color-mix(in srgb,var(--sp-text,#f6fbff),transparent 98%));
}

body.sv-freeEditor .sv-languagePickerButton:hover,
body.sv-freeEditor .sv-languagePickerButton[aria-expanded="true"]{
  border-color:var(--sv-preview-action-border-hover,color-mix(in srgb,var(--sv-blue,#67d8ff),transparent 42%));
  background:var(--sv-preview-action-bg-hover,color-mix(in srgb,var(--sp-surface-2,var(--sp-surface,#111827)),var(--sv-blue,#67d8ff) 14%));
}

body.sv-freeEditor .sv-languagePickerButton:focus-visible{
  outline:var(--sv-language-picker-focus-outline) solid color-mix(in srgb,var(--sv-blue,#67d8ff),transparent 22%);
  outline-offset:var(--sv-language-picker-focus-offset);
}

body.sv-freeEditor .sv-languagePickerLabel{
  min-inline-size:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.sv-freeEditor .sv-languagePickerChevron{
  inline-size:100%;
  block-size:100%;
  display:grid;
  place-items:center;
  justify-self:stretch;
  align-self:stretch;
  color:color-mix(in srgb,var(--sp-text,#f6fbff),transparent 28%);
  font-size:var(--sv-language-picker-chevron-fs);
  line-height:1;
  text-align:center;
  transform:translateY(var(--sv-language-picker-chevron-shift));
}

body.sv-freeEditor .sv-languagePickerMenu{
  position:fixed;
  z-index:var(--sv-z-language-menu);
  inset-block-start:var(--sv-language-menu-top,0);
  inset-inline-start:var(--sv-language-menu-left,0);
  inline-size:var(--sv-language-menu-width,min(var(--sv-language-picker-menu-preferred-w),calc(100vw - var(--sp-5,2rem))));
  max-block-size:var(--sv-language-menu-max-height,min(var(--sv-language-picker-menu-max-h),calc(100vh - var(--sp-8,2rem))));
  overflow:auto;
  display:grid;
  gap:var(--sp-1,.25rem);
  padding:var(--sp-2,.5rem);
  border:var(--sp-border-w-1,1px) solid color-mix(in srgb,var(--sv-blue,#67d8ff),transparent 48%);
  border-radius:var(--sp-radius-3,1rem);
  background:color-mix(in srgb,var(--sp-surface,#111827),#050812 12%);
  box-shadow:var(--sv-language-picker-menu-shadow);
}

body.sv-freeEditor .sv-languagePickerMenu[hidden]{display:none;}

body.sv-freeEditor .sv-languagePickerOption{
  appearance:none;
  -webkit-appearance:none;
  inline-size:100%;
  min-inline-size:0;
  min-block-size:var(--sv-language-picker-option-min-h);
  display:grid;
  grid-template-columns:var(--sv-language-picker-option-check-col) minmax(0,1fr);
  align-items:center;
  gap:var(--sp-2,.5rem);
  padding-block:var(--sp-1,.25rem);
  padding-inline:var(--sp-2,.5rem);
  border:var(--sp-border-w-1,1px) solid transparent;
  border-radius:var(--sp-radius-2,.75rem);
  background:transparent;
  color:var(--sp-text,#f6fbff);
  font:inherit;
  font-size:var(--sp-fs-2,.875rem);
  font-weight:var(--sp-fw-semibold,650);
  line-height:1.1;
  text-align:start;
  cursor:pointer;
}

body.sv-freeEditor .sv-languagePickerOption:hover,
body.sv-freeEditor .sv-languagePickerOption:focus-visible,
body.sv-freeEditor .sv-languagePickerOption.is-selected{
  border-color:color-mix(in srgb,var(--sv-blue,#67d8ff),transparent 62%);
  background:color-mix(in srgb,var(--sp-surface-2,var(--sp-surface,#111827)),var(--sv-blue,#67d8ff) 14%);
  outline:0;
}

body.sv-freeEditor .sv-languagePickerCheck{
  color:color-mix(in srgb,var(--sv-blue,#67d8ff),white 8%);
  opacity:0;
  text-align:center;
}

body.sv-freeEditor .sv-languagePickerOption.is-selected .sv-languagePickerCheck{opacity:1;}

body.sv-freeEditor .sv-languagePickerOptionLabel{
  min-inline-size:0;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
}

@media (max-width:54rem){
  body.sv-freeEditor .sv-languagePickerButton{
    inline-size:100%;
    min-inline-size:0;
    block-size:var(--sv-editor-mobile-select-h,var(--sv-preview-control-min-height,calc(var(--sp-7,1.75rem) + var(--sp-border-w-2,2px))));
    min-block-size:var(--sv-editor-mobile-select-h,var(--sv-preview-control-min-height,calc(var(--sp-7,1.75rem) + var(--sp-border-w-2,2px))));
    grid-template-columns:minmax(0,1fr) var(--sv-language-picker-chevron-col-mobile);
    padding-block:var(--sv-editor-mobile-control-pad-y,var(--sv-preview-control-pad-block,var(--sp-1,.25rem)));
    padding-inline:var(--sv-editor-mobile-control-pad-x,var(--sv-preview-control-pad-inline,var(--sp-3,.75rem)));
    border-radius:var(--sv-panel-control-radius,var(--sv-preview-control-radius,var(--sp-radius-3,1rem)));
    font-size:var(--sv-panel-control-fs,var(--sv-preview-control-fs,var(--sp-fs-1,.875rem)));
    line-height:1.15;
  }

  body.sv-freeEditor .sv-languagePickerChevron{
    transform:translateY(var(--sv-language-picker-chevron-shift-compact));
  }

  body.sv-freeEditor .sv-languagePickerMenu{
    inline-size:var(--sv-language-menu-width,min(var(--sv-language-picker-menu-mobile-w),calc(100vw - var(--sp-5,2rem))));
  }
}

/* Tablet portrait layout correction. This width rule is separate from the
   coarse-pointer keyboard contract, which intentionally extends to 90rem. */
@media (min-width:54.001rem) and (max-width:70rem) and (orientation:portrait){
  body.sv-freeEditor .sv-editorTitleGroup,
  body.sv-freeEditor .sv-languageField{
    overflow:visible;
  }

  body.sv-freeEditor .sv-languagePickerButton{
    block-size:var(--sv-language-picker-tablet-h);
    min-block-size:var(--sv-language-picker-tablet-h);
    padding-block:var(--sv-language-picker-tablet-pad-y);
    line-height:var(--sv-language-picker-tablet-lh);
  }

  body.sv-freeEditor .sv-languagePickerLabel{
    overflow:visible;
    text-overflow:clip;
    line-height:var(--sv-language-picker-tablet-lh);
  }

  body.sv-freeEditor .sv-languagePickerChevron{
    transform:translateY(var(--sv-language-picker-chevron-shift-compact));
  }
}