/* ==========================================================================
   Editor: tabs, gutter, text layers, decorations, marker bar, sticky lines.
   ========================================================================== */

.editor-area { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg-editor); }
.split-root { flex: 1; display: flex; min-height: 0; min-width: 0; }
.split-node { display: flex; min-height: 0; min-width: 0; flex: 1; }
/* Deliberately NOT `.row`/`.col`: the generic `.row` utility in shell.css sets
   align-items:center, which would stop split panes from stretching to the
   container height and let the editor grow to fit its content. */
.split-node.split-row { flex-direction: row; }
.split-node.split-col { flex-direction: column; }
.split-node { align-items: stretch; }
.split-leaf { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; position: relative; background: var(--bg-editor); }
.split-leaf.focused > .tabs { box-shadow: none; }

/* ------------------------------------------------------------------ tabs */
.tabs {
  height: var(--h-tab);
  min-height: var(--h-tab);
  display: flex;
  align-items: stretch;
  background: var(--bg-app);
  position: relative;
  flex: none;
}
.tabs-scroll {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.tabs-scroll::-webkit-scrollbar { height: 0; }
.tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px 0 9px;
  max-width: 230px;
  min-width: 0;
  color: var(--fg-dim);
  position: relative;
  border-right: 1px solid transparent;
  white-space: nowrap;
  flex: none;
  transition: background 90ms var(--ease), color 90ms var(--ease);
}
.tab .tab-icon { width: 15px; height: 15px; flex: none; display: block; }
.tab .tab-icon svg { width: 15px; height: 15px; display: block; }
.tab .tab-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tab .tab-dir { color: var(--fg-muted); font-size: 10.5px; margin-left: 1px; }
.tab:hover { background: var(--bg-tab-hover); color: var(--fg); }
.tab.active { background: var(--bg-tab-active); color: var(--fg); }
.tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
}
.split-leaf:not(.focused) .tab.active::after { background: var(--bd-strong); }
.tab.pinned .tab-close { display: none; }
.tab.pinned .tab-pin { display: grid; }
.tab.modified .tab-name { font-style: italic; }
.tab.problem .tab-name { text-decoration: underline wavy var(--sq-error) 1px; text-underline-offset: 3px; }
.tab.warn .tab-name { text-decoration: underline wavy var(--sq-warning) 1px; text-underline-offset: 3px; }
.tab-close, .tab-pin {
  width: 17px; height: 17px; flex: none;
  display: none; place-items: center;
  border-radius: var(--radius-s);
  color: var(--fg-muted);
  margin-left: 1px;
}
.tab-close svg, .tab-pin svg { width: 12px; height: 12px; }
.tab:hover .tab-close, .tab.active .tab-close { display: grid; }
.tab-close:hover { background: var(--bg-pressed); color: var(--fg); }
.tab.dragging { opacity: 0.5; }
.tab.drop-before::before, .tab.drop-after::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; width: 2px; background: var(--accent);
}
.tab.drop-before::before { left: -1px; } .tab.drop-after::before { right: -1px; }
.tabs-actions { display: flex; align-items: center; gap: 1px; padding: 0 4px; flex: none; background: var(--bg-app); }
.tabs-overflow { position: relative; }
.tabs-overflow .count {
  position: absolute; top: 1px; right: 0; font-size: 9px; color: var(--fg-muted);
}

/* -------------------------------------------------------------- breadcrumbs */
.breadcrumbs {
  height: 22px; min-height: 22px; display: flex; align-items: center;
  padding: 0 8px; gap: 0; background: var(--bg-editor);
  border-bottom: 1px solid transparent; overflow: hidden; flex: none;
}
.bc-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 4px; border-radius: var(--radius-s);
  color: var(--fg-muted); font-size: 11px; white-space: nowrap;
}
.bc-item svg { width: 13px; height: 13px; }
.bc-item:hover { background: var(--bg-hover); color: var(--fg); }
.bc-sep { opacity: 0.35; display: flex; align-items: center; }
.bc-sep svg { width: 10px; height: 10px; }

/* ------------------------------------------------------------------ editor */
.editor {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0; min-width: 0; position: relative;
  background: var(--bg-editor);
  font-family: var(--font-mono);
  font-size: var(--fs-editor);
  line-height: var(--lh-editor);
  outline: none;
}
.editor.no-ligatures { font-variant-ligatures: none; }
.ed-main { flex: 1; display: flex; min-height: 0; position: relative; overflow: hidden; }

.ed-gutter-vp {
  flex: none; position: relative; overflow: hidden;
  background: var(--bg-gutter); z-index: 3; user-select: none;
}
.ed-gutter { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }

.ed-text-vp {
  flex: 1; min-width: 0; position: relative;
  overflow: auto; scrollbar-width: none;
  outline: none;
}
.ed-text-vp::-webkit-scrollbar { width: 0; height: 0; }
.ed-sizer { position: relative; }

.ed-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
.ed-layer.ed-text { pointer-events: auto; }

/* rows -------------------------------------------------------------------- */
.ed-row {
  position: absolute; left: 0; right: 0;
  height: var(--lh-editor); line-height: var(--lh-editor);
  white-space: pre; tab-size: 4; -moz-tab-size: 4;
  color: var(--sy-text);
  padding-left: 6px;
  contain: layout style;
}
.ed-row.hidden-by-fold { display: none; }

.gt-row {
  position: absolute; left: 0; right: 0;
  height: var(--lh-editor); line-height: var(--lh-editor);
  display: flex; align-items: center;
  color: var(--ed-linenum);
  font-size: calc(var(--fs-editor) - 1px);
  font-variant-numeric: tabular-nums;
}
.gt-num {
  flex: 1; text-align: right; padding-right: 7px;
  color: var(--ed-linenum);
}
.gt-row.current .gt-num { color: var(--ed-linenum-active); }
.gt-icons {
  width: 17px; flex: none; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.gt-icons svg { width: 13px; height: 13px; }
.gt-icons .gi {
  width: 15px; height: 15px; display: grid; place-items: center;
  border-radius: 2px; pointer-events: auto; cursor: default;
}
.gt-icons .gi:hover { background: var(--bg-hover); }
.gt-icons .gi.err { color: var(--sq-error); }
.gt-icons .gi.warn { color: var(--sq-warning); }
.gt-icons .gi.bulb { color: var(--sq-warning); }
.gt-icons .gi.run { color: var(--run-green); }
.gt-icons .gi.bookmark { color: var(--accent); }
.gt-icons .gi.bp { color: var(--ed-breakpoint); }

.gt-fold {
  width: 13px; flex: none; display: flex; align-items: center; justify-content: center;
  color: var(--ed-fold-fg); opacity: 0; transition: opacity 90ms var(--ease);
  pointer-events: auto;
}
.gt-fold svg { width: 11px; height: 11px; }
.ed-gutter.show-folds .gt-fold, .gt-fold.collapsed, .gt-fold.hovered { opacity: 1; }
.gt-fold:hover { color: var(--fg); }

.gt-vcs {
  width: 3px; flex: none; align-self: stretch; margin-left: 2px;
  pointer-events: auto;
}
.gt-vcs.added { background: var(--vcs-added); }
.gt-vcs.modified { background: var(--vcs-modified); }
.gt-vcs.deleted {
  background: transparent; position: relative;
}
.gt-vcs.deleted::after {
  content: ''; position: absolute; left: 0; top: -2px; border: 3px solid transparent;
  border-left-color: var(--vcs-deleted); border-top-width: 3px; border-bottom-width: 3px;
}
.gt-vcs:hover { filter: brightness(1.35); }
.gt-annotation {
  flex: none; padding: 0 6px; color: var(--fg-muted); font-size: 10.5px;
  white-space: nowrap; overflow: hidden; max-width: 190px;
  border-right: 1px solid var(--bd-soft);
}

/* decorations ------------------------------------------------------------- */
.dec { position: absolute; height: var(--lh-editor); pointer-events: none; }
.dec-caretrow { left: 0; right: 0; background: var(--ed-caretrow); }
.dec-caretrow-border { left: 0; right: 0; border-top: 1px solid var(--bd-soft); border-bottom: 1px solid var(--bd-soft); background: none; }
.dec-sel { background: var(--ed-selection); }
.editor:not(.focused) .dec-sel { background: var(--ed-selection-inactive); }
.dec-search { background: var(--ed-search); }
.dec-search.current { background: var(--ed-search-current); box-shadow: 0 0 0 1px var(--ed-search-outline); }
.dec-usage-read { background: var(--ed-usage-read); }
.dec-usage-write { background: var(--ed-usage-write); }
.dec-brace { box-shadow: inset 0 0 0 1px var(--ed-brace-match); border-radius: 2px; }
.dec-warnbg { background: var(--bg-warning); }
.dec-errbg { background: var(--bg-error); }

.dec-sq { height: 3px; pointer-events: auto; }
.dec-sq.error { background: var(--wave-err); }
.dec-sq.warning { background: var(--wave-warn); }
.dec-sq.weak { border-bottom: 1px dotted var(--sq-weak); height: 1px; }
.dec-sq.typo { background: var(--wave-typo); }
.dec-sq.info { border-bottom: 1px dashed var(--sq-info); height: 1px; }
:root {
  --wave-err: repeating-linear-gradient(135deg, var(--sq-error) 0 1px, transparent 1px 2px);
  --wave-warn: repeating-linear-gradient(135deg, var(--sq-warning) 0 1px, transparent 1px 2px);
  --wave-typo: repeating-linear-gradient(135deg, var(--sq-typo) 0 1px, transparent 1px 2px);
}
/* real wavy underline where the browser supports it */
@supports (text-decoration: underline wavy red) {
  .dec-sq { background: none !important; height: var(--lh-editor); border: 0 !important; }
  .dec-sq::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 4px;
    background-repeat: repeat-x; background-position: 0 100%;
  }
  .dec-sq.error::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.2 Q1.5 0.2 3 2.2 T6 2.2' fill='none' stroke='%23f75464' stroke-width='1'/%3E%3C/svg%3E"); }
  .dec-sq.warning::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.2 Q1.5 0.2 3 2.2 T6 2.2' fill='none' stroke='%23bd9020' stroke-width='1'/%3E%3C/svg%3E"); }
  .dec-sq.typo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.2 Q1.5 0.2 3 2.2 T6 2.2' fill='none' stroke='%23598e4f' stroke-width='1'/%3E%3C/svg%3E"); }
  .dec-sq.weak::after { border-bottom: 1px dotted var(--sq-weak); height: 0; bottom: 2px; }
  .dec-sq.info::after { border-bottom: 1px dashed var(--sq-info); height: 0; bottom: 2px; }
}
[data-theme='light'] .dec-sq.error::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.2 Q1.5 0.2 3 2.2 T6 2.2' fill='none' stroke='%23e2504c' stroke-width='1'/%3E%3C/svg%3E"); }
[data-theme='light'] .dec-sq.warning::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.2 Q1.5 0.2 3 2.2 T6 2.2' fill='none' stroke='%23d4a11a' stroke-width='1'/%3E%3C/svg%3E"); }

.dec-caret {
  width: 2px; background: var(--ed-caret);
  height: var(--lh-editor);
}
.editor.focused .dec-caret.blink { animation: caretBlink 1.06s steps(1) infinite; }
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.editor:not(.focused) .dec-caret { opacity: 0.45; width: 1px; }
.dec-caret.secondary { background: var(--ed-caret); opacity: 0.85; }
.editor.overwrite .dec-caret { width: var(--cw, 8px); opacity: 0.4; }

.dec-indent { width: 1px; background: var(--ed-indent-guide); }
.dec-indent.active { background: var(--ed-indent-guide-active); }
.ed-margin { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ed-ruler); pointer-events: none; }

.fold-chip {
  position: absolute; height: calc(var(--lh-editor) - 4px); top: 2px;
  display: inline-flex; align-items: center; padding: 0 5px;
  background: var(--ed-fold-bg); color: var(--ed-fold-fg);
  border-radius: 3px; font-size: 11px; pointer-events: auto;
  border: 1px solid transparent;
}
.fold-chip:hover { border-color: var(--bd-strong); color: var(--fg); }

.inlay {
  position: absolute; height: calc(var(--lh-editor) - 4px); top: 2px;
  display: inline-flex; align-items: center; padding: 0 4px;
  background: var(--bg-hover); color: var(--fg-muted);
  border-radius: 6px; font-size: 10.5px; pointer-events: auto; white-space: nowrap;
  font-family: var(--font-ui);
}
.inlay:hover { color: var(--fg); }

.ws-dot { position: absolute; pointer-events: none; color: var(--ed-whitespace); white-space: pre; }

/* sticky lines ------------------------------------------------------------ */
.ed-sticky {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  background: var(--bg-editor); pointer-events: auto;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid var(--bd-soft);
  display: none;
}
.ed-sticky.on { display: block; }
.ed-sticky .sl-row {
  height: var(--lh-editor); line-height: var(--lh-editor);
  white-space: pre; tab-size: 4; overflow: hidden; color: var(--sy-text);
  display: flex;
}
.ed-sticky .sl-row:hover { background: var(--bg-hover); }
.ed-sticky .sl-gutter { flex: none; text-align: right; color: var(--ed-linenum); font-size: calc(var(--fs-editor) - 1px); padding-right: 7px; }
.ed-sticky .sl-text { flex: 1; padding-left: 6px; overflow: hidden; }

/* marker bar (error stripe) ------------------------------------------------ */
.ed-marker {
  flex: none; width: var(--w-marker); position: relative;
  background: var(--stripe-bg); z-index: 4; cursor: default;
  border-left: 1px solid transparent;
}
.ed-marker .mk-top {
  position: absolute; top: 0; left: 0; right: 0; height: 12px;
  display: grid; place-items: center; z-index: 2;
}
.ed-marker .mk-top svg { width: 11px; height: 11px; }
.ed-marker .mk-track { position: absolute; top: 13px; left: 0; right: 0; bottom: 0; }
.mk-stripe {
  position: absolute; left: 2px; right: 4px; height: 3px; border-radius: 1px;
  pointer-events: auto;
}
.mk-stripe.error { background: var(--stripe-error); }
.mk-stripe.warning { background: var(--stripe-warning); }
.mk-stripe.weak { background: var(--stripe-weak); }
.mk-stripe.typo { background: var(--stripe-typo); }
.mk-stripe.unused { background: var(--stripe-weak); }
.mk-stripe.deprecated { background: var(--stripe-weak); }
.mk-stripe.info { background: var(--stripe-info); }
.mk-stripe.search { background: var(--stripe-search); left: 6px; right: 1px; }
.mk-stripe.vcs-added { background: var(--vcs-added); left: 0; right: 10px; opacity: .8; }
.mk-stripe.vcs-modified { background: var(--vcs-modified); left: 0; right: 10px; opacity: .8; }
.mk-stripe:hover { filter: brightness(1.4); }
.mk-caret { position: absolute; left: 0; right: 0; height: 2px; background: var(--stripe-caret); opacity: 0.7; }

/* custom scrollbar thumb drawn over the marker bar, JetBrains-style */
.mk-thumb {
  position: absolute; left: 2px; right: 2px; border-radius: 4px;
  background: var(--scroll-thumb); opacity: 0; pointer-events: auto;
  transition: opacity 160ms var(--ease);
  min-height: 26px;
}
.ed-marker:hover .mk-thumb, .mk-thumb.visible, .mk-thumb.dragging { opacity: 0.85; }
.mk-thumb:hover, .mk-thumb.dragging { background: var(--scroll-thumb-hover); }

.ed-hbar { height: 9px; flex: none; position: relative; background: transparent; }
.ed-hbar .hb-thumb {
  position: absolute; top: 2px; height: 5px; border-radius: 3px;
  background: var(--scroll-thumb); opacity: 0; transition: opacity 160ms var(--ease);
  pointer-events: auto; min-width: 24px;
}
.editor:hover .ed-hbar .hb-thumb, .hb-thumb.dragging { opacity: 0.8; }
.ed-hbar.off { display: none; }

.ed-input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  padding: 0; border: 0; resize: none; overflow: hidden;
  z-index: -1; white-space: pre; font-family: var(--font-mono);
}

/* ----------------------------------------------------------- syntax scopes */
.t-keyword, .t-keyword2 { color: var(--sy-keyword); }
.t-string, .t-string2 { color: var(--sy-string); }
.t-escape { color: var(--sy-escape); font-weight: 600; }
.t-number { color: var(--sy-number); }
.t-comment { color: var(--sy-comment); font-style: italic; }
.t-doc { color: var(--sy-doc); font-style: italic; }
.t-doctag { color: var(--sy-doctag); font-style: italic; font-weight: 600; }
.t-operator { color: var(--sy-operator); }
.t-punct { color: var(--sy-punct); }
.t-ident { color: var(--sy-ident); }
.t-fn { color: var(--sy-fn); }
.t-fncall { color: var(--sy-fncall); }
.t-type { color: var(--sy-type); }
.t-class { color: var(--sy-class); }
.t-param { color: var(--sy-param); }
.t-local { color: var(--sy-local); }
.t-field { color: var(--sy-field); }
.t-static { color: var(--sy-static); font-style: italic; }
.t-global { color: var(--sy-global); }
.t-const { color: var(--sy-const); font-style: italic; }
.t-label { color: var(--sy-label); }
.t-tag { color: var(--sy-tag); }
.t-attr { color: var(--sy-attr); }
.t-regexp { color: var(--sy-regexp); }
.t-annotation { color: var(--sy-annotation); }
.t-template { color: var(--sy-template); }
.t-invalid { color: var(--sy-invalid); text-decoration: underline wavy var(--sy-invalid); }
.t-link { color: var(--sy-link); text-decoration: underline; }
.t-heading { color: var(--sy-heading); font-weight: 700; }
.t-bold { font-weight: 700; }
.t-italic { font-style: italic; }
.t-strike { text-decoration: line-through; }
.t-code { color: var(--sy-inline-code); }
.t-html { color: var(--sy-html-text); }
.t-embedded { background: var(--sy-injected-bg); }
.t-variable { color: var(--sy-text); }
.t-property { color: var(--sy-field); }
.t-selector { color: var(--sy-tag); }
.t-pseudo { color: var(--sy-annotation); }
.t-unit { color: var(--sy-number); }
.t-color { color: var(--sy-number); }
.t-important { color: var(--sy-keyword); font-weight: 600; }
.t-atrule { color: var(--sy-keyword); }
.t-key { color: var(--sy-field); }
.t-entity { color: var(--sy-escape); }
.t-instruction { color: var(--sy-annotation); }
.t-anchor { color: var(--sy-annotation); }
.t-text { color: var(--sy-text); }

/* Text-level severities: unused symbols are greyed out and deprecated ones
   struck through, applied as additive modifier classes on the syntax spans so
   the underlying colour survives. */
.t-unused { opacity: 0.5; }
.t-deprecated { text-decoration: line-through; text-decoration-color: var(--fg-muted); text-decoration-thickness: 1px; }
.dec-unused { opacity: 0.5; }
.dec-deprecated { text-decoration: line-through; text-decoration-color: var(--fg-muted); }

/* Editor placeholder when no file is open */
.ed-nofile {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--fg-muted); font-family: var(--font-ui); background: var(--bg-editor);
}
.ed-nofile .rows { display: grid; grid-template-columns: auto auto; gap: 7px 22px; font-size: 12px; }
.ed-nofile .rows .k { color: var(--fg-dim); text-align: right; }
.ed-nofile .rows .v { color: var(--fg-muted); }
.ed-nofile .logo { opacity: 0.16; }
.ed-nofile .logo svg { width: 62px; height: 62px; }