/* Spectra Free Editor header layout */

body.sv-freeEditor .sv-editorHeader{
  position:relative;
  z-index:var(--sv-z-header);
  overflow:visible;
}

body.sv-freeEditor .sv-editorHeaderInner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(var(--sv-profile-button-size),1fr);
  align-items:center;
  gap:var(--sp-3,.75rem);
  padding-block:var(--sp-2,.5rem);
  overflow:visible;
}

body.sv-freeEditor .sv-editorHeaderBrandSlot{
  min-inline-size:0;
  justify-self:start;
}

body.sv-freeEditor .sv-editorBrand{
  gap:var(--sp-2,.5rem);
}

body.sv-freeEditor .sv-editorBrand .sp-brand__text{
  font-size:clamp(1.35rem,calc(var(--sp-fs-5,1.25rem) + .22vw),1.58rem);
  font-weight:var(--sp-fw-bold,750);
  letter-spacing:-.025em;
  line-height:1;
}

body.sv-freeEditor .sv-editorBrand .sp-badge{
  min-block-size:calc(var(--sp-6,1.5rem) + var(--sp-border-w-1,1px));
  padding-inline:var(--sp-2,.5rem);
  border-radius:var(--sv-radius-round);
  font-size:clamp(.78rem,calc(var(--sp-fs-1,.8125rem) + .03vw),.88rem);
  font-weight:var(--sp-fw-semibold,650);
  line-height:1;
}

body.sv-freeEditor .sv-editorHeaderActions{
  position:relative;
  z-index:var(--sv-z-profile-menu);
  justify-self:end;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

body.sv-freeEditor .sv-editorHeaderToolsRow{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2,.5rem);
  flex-wrap:nowrap;
  min-inline-size:0;
}

body.sv-freeEditor .sv-headerIcon{
  inline-size:var(--sv-header-icon-size);
  block-size:var(--sv-header-icon-size);
  flex:0 0 var(--sv-header-icon-size);
  object-fit:contain;
  pointer-events:none;
}

body.sv-freeEditor .sv-headerToolButton,
body.sv-freeEditor .sv-headerSoonButton{
  min-block-size:var(--sv-header-action-min-h);
  gap:var(--sp-1,.25rem);
  white-space:nowrap;
}

body.sv-freeEditor .sv-headerSoonButton{
  opacity:.74;
  cursor:not-allowed;
}

body.sv-freeEditor .sv-headerSoonButton:disabled{
  color:color-mix(in srgb,var(--sp-text,#f6fbff),transparent 18%);
}

body.sv-freeEditor .sv-headerSoonButton .sv-headerIcon{
  opacity:.82;
  filter:saturate(.82) brightness(1.08);
}

body.sv-freeEditor .sv-soonBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.05rem .32rem;
  border:var(--sp-border-w-1,1px) solid color-mix(in srgb,var(--sp-border,#334155),transparent 38%);
  border-radius:var(--sv-radius-round);
  color:color-mix(in srgb,var(--sp-muted,#9ca3af),var(--sp-text,#f6fbff) 14%);
  font-size:.68em;
  font-weight:var(--sp-fw-semibold,650);
  letter-spacing:.045em;
  line-height:1;
  text-transform:uppercase;
}

body.sv-freeEditor .sv-profileButton{
  appearance:none;
  -webkit-appearance:none;
  inline-size:var(--sv-profile-button-size);
  block-size:var(--sv-profile-button-size);
  min-inline-size:var(--sv-profile-button-size);
  min-block-size:var(--sv-profile-button-size);
  max-inline-size:var(--sv-profile-button-size);
  max-block-size:var(--sv-profile-button-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--sv-profile-button-size);
  padding:0 !important;
  margin:0;
  border:0 !important;
  border-radius:var(--sv-radius-round) !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit;
  line-height:1;
  overflow:visible;
}

body.sv-freeEditor .sv-profileButton:hover,
body.sv-freeEditor .sv-profileButton[aria-expanded="true"]{
  background:transparent !important;
  box-shadow:none !important;
  transform:none;
}

body.sv-freeEditor .sv-profileButton:focus-visible{
  outline:0;
}

body.sv-freeEditor .sv-profileButton:focus-visible .sv-profileAvatar{
  outline:var(--sv-profile-focus-outline) solid color-mix(in srgb,var(--sv-blue),transparent 20%);
  outline-offset:var(--sv-profile-focus-offset);
}

body.sv-freeEditor .sv-profileAvatar{
  inline-size:var(--sv-profile-avatar-size);
  block-size:var(--sv-profile-avatar-size);
  min-inline-size:var(--sv-profile-avatar-size);
  min-block-size:var(--sv-profile-avatar-size);
  max-inline-size:var(--sv-profile-avatar-size);
  max-block-size:var(--sv-profile-avatar-size);
  aspect-ratio:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--sv-profile-avatar-size);
  border-radius:var(--sv-radius-round) !important;
  border:var(--sp-border-w-1,1px) solid color-mix(in srgb,var(--sv-blue),transparent 64%);
  background:color-mix(in srgb,var(--sp-surface-2,var(--sp-surface,#111827)),var(--sv-blue) 7%);
  color:var(--sp-text,#f6fbff);
  font-size:var(--sp-fs-1,.8125rem);
  font-weight:var(--sp-fw-semibold,650);
  letter-spacing:.02em;
  overflow:hidden;
}

body.sv-freeEditor .sv-profileMenu{
  position:absolute;
  z-index:var(--sv-z-profile-menu);
  inset-block-start:calc(100% + var(--sp-2,.5rem));
  inset-inline-end:0;
  inline-size:min(14rem,calc(100vw - var(--sp-4,1rem)));
  max-block-size:none;
  overflow:visible;
  padding:var(--sp-2,.5rem);
  border:var(--sp-border-w-1,1px) solid color-mix(in srgb,var(--sv-blue),transparent 72%);
  border-radius:var(--sp-radius-3,1rem);
  background:color-mix(in srgb,var(--sp-surface,#111827),var(--sp-bg,#050812) 16%);
  box-shadow:var(--sv-profile-menu-shadow);
}

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

body.sv-freeEditor .sv-profileMenuIdentity{
  padding:var(--sp-2,.5rem);
  color:var(--sp-text,#f6fbff);
  font-weight:var(--sp-fw-semibold,650);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.sv-freeEditor .sv-profileMenuPlaceholder{
  padding:var(--sp-2,.5rem);
  color:var(--sp-muted,#9ca3af);
  font-size:var(--sp-fs-2,.875rem);
}

body.sv-freeEditor .sv-profileMenuRule{
  block-size:var(--sp-border-w-1,1px);
  margin:var(--sp-2,.5rem) 0;
  border:0;
  background:color-mix(in srgb,var(--sp-border,#334155),transparent 34%);
}

body.sv-freeEditor .sv-profileMenuItem{
  appearance:none;
  inline-size:100%;
  min-block-size:var(--sv-header-action-min-h);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  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);
  cursor:pointer;
  padding:0 var(--sp-3,.75rem);
  text-align:start;
}

body.sv-freeEditor .sv-profileMenuItem:hover,
body.sv-freeEditor .sv-profileMenuItem:focus-visible{
  border-color:color-mix(in srgb,var(--sv-blue),transparent 78%);
  background:color-mix(in srgb,var(--sp-surface-2,var(--sp-surface,#111827)),var(--sv-blue) 7%);
  outline:0;
}

@media (max-width:54rem){
  body.sv-freeEditor .sv-editorHeaderInner{
    grid-template-columns:1fr auto;
    gap:var(--sp-2,.5rem);
    padding-block:var(--sp-2,.5rem);
  }

  body.sv-freeEditor .sv-editorHeaderBrandSlot{grid-column:1;grid-row:1;}
  body.sv-freeEditor .sv-editorHeaderActions{grid-column:2;grid-row:1;}

  body.sv-freeEditor .sv-editorHeaderToolsRow{
    grid-column:1 / -1;
    grid-row:2;
    inline-size:100%;
    justify-self:stretch;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--sp-2,.5rem);
  }

  body.sv-freeEditor .sv-editorHeaderToolsRow .sp-btn{
    inline-size:100%;
    block-size:var(--sv-header-action-h-mobile);
    min-block-size:var(--sv-header-action-h-mobile);
    justify-content:center;
    padding-inline:var(--sp-2,.5rem);
    font-size:var(--sp-fs-1,.875rem);
    line-height:1;
  }

  body.sv-freeEditor .sv-editorHeaderToolsRow .sv-headerIcon{
    inline-size:var(--sv-header-icon-size-mobile);
    block-size:var(--sv-header-icon-size-mobile);
    flex-basis:var(--sv-header-icon-size-mobile);
  }

  body.sv-freeEditor .sv-editorBrand .sp-brand__text{
    font-size:clamp(1.55rem,calc(var(--sp-fs-6,1.375rem) + .45vw),1.8rem);
  }

  body.sv-freeEditor .sv-editorBrand .sp-badge{
    min-block-size:calc(var(--sp-6,1.5rem) + var(--sp-border-w-2,2px));
    font-size:clamp(.82rem,calc(var(--sp-fs-1,.8125rem) + .08vw),.92rem);
  }

  body.sv-freeEditor .sv-headerSoonButton{
    opacity:.78;
    font-size:var(--sp-fs-1,.875rem);
  }

  body.sv-freeEditor .sv-soonBadge{display:none;}
  body.sv-freeEditor .sp-brand{min-inline-size:0;}

  body.sv-freeEditor .sp-brand__text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}