.editor-card {
  grid-column:1/-1;
  scroll-margin-top:100px;
}

.editor-heading {
  flex-wrap:wrap;
  gap:12px;
}

.editor-heading-actions,.editor-actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.editor-layout {
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  min-height:350px;
}

.editor-files {
  padding:12px 9px;
  border-right:1px solid var(--line);
  min-width:0;
}

.editor-directory {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
}

.editor-directory span {
  font:10px/1.5 var(--mono);
  color:var(--muted);
  overflow-wrap:anywhere;
}

.editor-files-list {
  display:flex;
  flex-direction:column;
  gap:3px;
  max-height:310px;
  overflow:auto;
  padding:4px;
}

.editor-file {
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:8px;
  text-align:left;
  font:11px/1.4 var(--mono);
  overflow-wrap:anywhere;
  cursor:pointer;
}

.editor-file[aria-current=true] {
  background:#25321f;
  color:var(--lime);
  border-color:#465440;
}

.editor-file:hover {
  color:var(--text);
  background:#1c261d;
}

.editor-file-empty {
  font-size:11px;
  color:var(--muted);
  padding:8px;
}

.editor-document {
  min-width:0;
  display:flex;
  flex-direction:column;
}

.editor-document-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 13px;
  border-bottom:1px solid var(--line);
}

.editor-path {
  font:11px/1.5 var(--mono);
  overflow-wrap:anywhere;
  color:var(--muted);
}

.editor-path[data-dirty=true] {
  color:var(--lime);
}

.editor-input-row {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 13px;
  border-bottom:1px solid var(--line);
  font-size:11px;
}

.editor-input-row[hidden] {
  display:none;
}

.editor-input-row input {
  min-width:90px;
  flex:1;
  background:#0d120e;
  color:var(--text);
  border:1px solid #465440;
  border-radius:3px;
  padding:8px;
  font:12px var(--mono);
}

.editor-input-row label {
  color:var(--muted);
}

.editor-surface {
  display:flex;
  min-height:290px;
  flex:1;
  background:#0d120f;
  overflow:hidden;
}

.editor-gutter {
  flex:none;
  width:48px;
  padding:15px 10px 15px 4px;
  margin:0;
  text-align:right;
  font:12px/20px var(--mono);
  color:#64715f;
  user-select:none;
  overflow:hidden;
  max-height:440px;
  box-sizing:border-box;
  border-right:1px solid #263025;
}

.editor-text {
  display:block;
  flex:1;
  width:0;
  min-width:0;
  min-height:290px;
  height:350px;
  max-height:440px;
  resize:vertical;
  margin:0;
  padding:15px 13px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
  font:12px/20px var(--mono);
  tab-size:4;
  white-space:pre;
  overflow:auto;
  outline:none!important;
}

.editor-text:focus-visible {
  box-shadow:inset 0 0 0 1px #718b4e;
}

.editor-text:disabled {
  opacity:.5;
}

.editor-status {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:10px 13px;
  border-top:1px solid var(--line);
  font:10px/1.6 var(--mono);
  color:var(--muted);
}

.editor-status [role=status] {
  overflow-wrap:anywhere;
}

.editor-status[data-error=true] {
  color:#efaa9c;
}

.editor-position {
  white-space:nowrap;
}

.editor-import {
  display:none;
}

.editor-card .tool-button {
  padding:7px 10px;
}

.editor-card .tool-button:focus-visible,.editor-file:focus-visible {
  outline-offset:-2px;
}

@media(max-width:600px) {
  .editor-layout {
    grid-template-columns:minmax(0,1fr);
  }
  .editor-files {
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .editor-files-list {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    max-height:110px;
  }
  .editor-document-bar {
    align-items:flex-start;
    flex-direction:column;
  }
  .editor-heading {
    padding:15px;
  }
  .editor-text {
    font-size:14px;
  }
  .editor-directory {
    margin-bottom:3px;
  }
  .editor-status {
    font-size:9px;
  }
}

.editor-text, .editor-gutter { font-size: var(--editor-font-size, 14px); line-height: 1.6; tab-size: var(--editor-tab-size, 2); }