/* Spectra Free Editor wide header rhythm
   Phone keeps the two-row compact layout. Tablet, compact desktop, and wide
   desktop stay on one balanced line. Width layout is independent from the
   coarse-pointer keyboard contract. */

body.sp-app-shell.sv-freeEditor{
  --sv-header-action-fs:clamp(.78rem,calc(var(--sp-fs-1,.875rem) - .02rem),.86rem);
  --sv-header-action-fs-compact:clamp(.76rem,calc(var(--sp-fs-1,.875rem) - .04rem),.82rem);
  --sv-header-action-h:calc(var(--sp-6,1.5rem) + var(--sp-1,.25rem) + var(--sp-border-w-2,2px));
  --sv-header-action-pad-x:calc(var(--sp-2,.5rem) + var(--sp-1,.25rem));
  --sv-header-action-pad-x-compact:calc(var(--sp-2,.5rem) + var(--sp-border-w-1,1px));
  --sv-header-action-icon-wide:1.74em;
  --sv-header-action-soon-fs:.62em;
  --sv-header-action-soon-pad-x:calc(var(--sp-1,.25rem) + var(--sp-border-w-1,1px));
  --sv-header-action-soon-pad-block:.025rem;
  --sv-header-action-letter-spacing:.004em;
  --sv-header-action-soon-letter-spacing:.052em;
  --sv-header-action-soon-shift:-.04em;
  --sv-header-action-glow:0 0 .45rem color-mix(in srgb,var(--sv-blue,#67d8ff),transparent 93%);

  --sv-header-track-min:12rem;
  --sv-header-nav-min:25rem;
  --sv-header-nav-max:36rem;
  --sv-header-nav-offset:calc(var(--sp-4,1rem) + var(--sp-1,.25rem));

  --sv-header-track-min-compact:11rem;
  --sv-header-nav-min-compact:24rem;
  --sv-header-nav-max-compact:34rem;
  --sv-header-nav-offset-compact:var(--sp-3,.75rem);

  --sv-header-track-min-wide:14rem;
  --sv-header-nav-min-wide:28rem;
  --sv-header-nav-max-wide:40rem;
}

@media (min-width:54.001rem){
  body.sp-app-shell.sv-freeEditor{
    --sv-profile-button-size:var(--sv-profile-button-size-wide);
    --sv-profile-avatar-size:var(--sv-profile-avatar-size-wide);
  }

  body.sv-freeEditor .sv-editorHeaderInner{
    grid-template-columns:
      minmax(var(--sv-header-track-min),1fr)
      minmax(var(--sv-header-nav-min),var(--sv-header-nav-max))
      minmax(var(--sv-header-track-min),1fr);
    grid-template-areas:"brand nav profile";
    align-items:center;
    gap:var(--sp-3,.75rem);
    padding-block:var(--sp-2,.5rem);
  }

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

  body.sv-freeEditor .sv-editorHeaderToolsRow{
    grid-area:nav;
    inline-size:100%;
    justify-self:center;
    translate:var(--sv-header-nav-offset) 0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:var(--sp-2,.5rem);
  }

  body.sv-freeEditor .sv-editorHeaderActions{
    grid-area:profile;
    justify-self:end;
  }

  body.sv-freeEditor .sv-editorHeaderToolsRow .sp-btn.sv-headerToolButton,
  body.sv-freeEditor .sv-editorHeaderToolsRow .sp-btn.sv-headerSoonButton{
    inline-size:100%;
    min-inline-size:0;
    justify-content:center;
    block-size:var(--sv-header-action-h);
    min-block-size:var(--sv-header-action-h);
    padding-inline:var(--sv-header-action-pad-x);
    border-radius:var(--sp-radius-3,1rem);
    border-color:color-mix(in srgb,var(--sv-blue,#67d8ff),transparent 58%);
    background:color-mix(in srgb,var(--sp-surface-2,var(--sp-surface,#111827)),var(--sv-blue,#67d8ff) 11%);
    box-shadow:var(--sv-header-action-glow);
    color:color-mix(in srgb,var(--sp-text,#f6fbff),white 5%);
    font-size:var(--sv-header-action-fs);
    font-weight:var(--sp-fw-semibold,650);
    letter-spacing:var(--sv-header-action-letter-spacing);
    line-height:var(--sp-lh-1,1);
  }

  body.sv-freeEditor .sv-headerSoonButton{opacity:.84;}
  body.sv-freeEditor .sv-headerToolButton{opacity:1;}

  body.sv-freeEditor .sv-headerToolButton .sv-headerIcon,
  body.sv-freeEditor .sv-headerSoonButton .sv-headerIcon{
    inline-size:var(--sv-header-action-icon-wide);
    block-size:var(--sv-header-action-icon-wide);
    flex-basis:var(--sv-header-action-icon-wide);
    opacity:.98;
    filter:saturate(1.1) brightness(1.1);
  }

  body.sv-freeEditor .sv-soonBadge{
    padding-block:var(--sv-header-action-soon-pad-block);
    padding-inline:var(--sv-header-action-soon-pad-x);
    border-color:color-mix(in srgb,var(--sv-blue,#67d8ff),transparent 76%);
    color:color-mix(in srgb,var(--sp-text,#f6fbff),transparent 18%);
    background:color-mix(in srgb,var(--sv-blue,#67d8ff),transparent 92%);
    font-size:var(--sv-header-action-soon-fs);
    line-height:1;
    letter-spacing:var(--sv-header-action-soon-letter-spacing);
    transform:translateY(var(--sv-header-action-soon-shift));
  }
}

/* Compact wide band: tablet portrait/landscape and 1024px desktop. */
@media (min-width:54.001rem) and (max-width:70rem){
  body.sv-freeEditor .sv-editorHeaderInner{
    grid-template-columns:
      minmax(var(--sv-header-track-min-compact),1fr)
      minmax(var(--sv-header-nav-min-compact),var(--sv-header-nav-max-compact))
      minmax(var(--sv-header-track-min-compact),1fr);
  }

  body.sv-freeEditor .sv-editorHeaderToolsRow{
    translate:var(--sv-header-nav-offset-compact) 0;
  }

  body.sv-freeEditor .sv-editorHeaderToolsRow .sp-btn.sv-headerToolButton,
  body.sv-freeEditor .sv-editorHeaderToolsRow .sp-btn.sv-headerSoonButton{
    font-size:var(--sv-header-action-fs-compact);
    block-size:var(--sv-header-action-h);
    min-block-size:var(--sv-header-action-h);
    padding-inline:var(--sv-header-action-pad-x-compact);
  }
}

@media (min-width:70.001rem){
  body.sv-freeEditor .sv-editorHeaderInner{
    grid-template-columns:
      minmax(var(--sv-header-track-min-wide),1fr)
      minmax(var(--sv-header-nav-min-wide),var(--sv-header-nav-max-wide))
      minmax(var(--sv-header-track-min-wide),1fr);
  }
}