/* Spectra Free Editor grid and wrap-state ownership
   JavaScript stores the persistent Wrap preference on .sv-editorCodeShell.
   This layer maps that state to the textarea/highlight surface, then supplies
   the grid-area pinning and phone control-grid composition. */

body.sv-freeEditor .sv-editorCodeShell{
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"gutter editor";
}

body.sv-freeEditor .sv-editorCodeShell.is-line-numbers-hidden{
  grid-template-areas:"editor";
}

body.sv-freeEditor .sv-editorLineNumbers{
  grid-area:gutter;
  block-size:100%;
  min-block-size:0;
}

body.sv-freeEditor .sv-editorSyntaxSurface,
body.sv-freeEditor .sv-editorArea{
  grid-area:editor;
  min-block-size:0;
  min-inline-size:0;
}

body.sv-freeEditor .sv-editorSyntaxSurface{z-index:1;}
body.sv-freeEditor .sv-editorArea{z-index:2;}
body.sv-freeEditor .sv-editorSyntaxHighlight{grid-area:surface;}

/* Preserve the user's Wrap preference after touch-keyboard focus exits. */
body.sv-freeEditor .sv-editorCodeShell.is-wrapped .sv-editorArea,
body.sv-freeEditor .sv-editorCodeShell.is-wrapped .sv-editorSyntaxHighlight{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  overflow-x:hidden;
}

body.sv-freeEditor .sv-editorCodeShell:not(.is-wrapped) .sv-editorArea,
body.sv-freeEditor .sv-editorCodeShell:not(.is-wrapped) .sv-editorSyntaxHighlight{
  white-space:pre;
  overflow-wrap:normal;
  overflow-x:auto;
}

@media (max-width:54rem){
  body.sv-freeEditor .sv-editorPanelHeader{
    --sv-editor-mobile-button-h:calc(var(--sv-panel-control-h,var(--sp-8,2rem)) + var(--sp-border-w-2,2px));
    --sv-editor-mobile-select-h:calc(var(--sv-preview-control-min-height,var(--sp-9,2.25rem)) + var(--sp-border-w-2,2px));
    --sv-editor-mobile-control-pad-x:calc(var(--sv-panel-control-pad-x,var(--sp-2,.5rem)) + var(--sp-border-w-1,1px));
    --sv-editor-mobile-control-pad-y:var(--sv-panel-control-pad-y,var(--sp-1,.25rem));
    --sv-editor-mobile-row-gap:var(--sv-panel-header-gap,var(--sp-2,.5rem));
    --sv-editor-mobile-col-gap:var(--sv-panel-inline-gap,var(--sp-2,.5rem));

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:auto;
    align-items:start;
    gap:var(--sv-editor-mobile-row-gap) var(--sv-editor-mobile-col-gap);
    padding-block:var(--sv-panel-header-pad-y,var(--sp-2,.5rem));
    padding-inline:var(--sv-panel-header-pad-x,var(--sp-3,1rem));
  }

  body.sv-freeEditor .sv-editorTitleGroup{
    grid-column:1 / -1;
    grid-row:1;
    inline-size:100%;
    min-inline-size:0;
    display:flex;
    align-items:center;
    gap:var(--sv-editor-mobile-col-gap);
  }

  body.sv-freeEditor .sv-languageField{
    inline-size:100%;
    min-inline-size:0;
    margin:0;
  }

  body.sv-freeEditor .sv-languageSelect{
    appearance:auto;
    -webkit-appearance:auto;
    box-sizing:border-box;
    inline-size:100%;
    min-inline-size:0;
    block-size:var(--sv-editor-mobile-select-h);
    min-block-size:var(--sv-editor-mobile-select-h);
    max-block-size:none;
    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-radius:var(--sv-preview-control-radius,var(--sp-radius-3,1rem));
    font-size:var(--sv-preview-control-fs,var(--sp-fs-1,.875rem));
    line-height:var(--sv-preview-control-lh,1.2);
  }

  body.sv-freeEditor .sv-editorControls{
    grid-column:1 / -1;
    grid-row:2;
    inline-size:100%;
    min-inline-size:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:var(--sv-editor-mobile-col-gap);
  }

  body.sv-freeEditor .sv-editorControls .sp-btn,
  body.sv-freeEditor .sv-editorControls .sp-btn.sp-btn--sm{
    inline-size:100%;
    min-inline-size:0;
    block-size:var(--sv-editor-mobile-button-h);
    min-block-size:var(--sv-editor-mobile-button-h);
    max-block-size:var(--sv-editor-mobile-button-h);
    padding-block:var(--sv-editor-mobile-control-pad-y) !important;
    padding-inline:var(--sv-editor-mobile-control-pad-x) !important;
    border-radius:var(--sv-panel-control-radius,var(--sp-radius-2,.8rem));
    font-size:var(--sv-panel-control-fs,var(--sp-fs-1,.875rem));
    line-height:var(--sp-lh-1,1);
    justify-content:center;
  }
}