/* =====================================================================
     Split windows and diff mode

     Panes reuse the editor's own tokens, so a split looks like the
     editor repeated rather than like a different widget. With one window
     open nothing here applies and the layout is exactly as it was.
     ===================================================================== */

  #editor-container.split-col { flex-direction: column; }
  #editor-container.split-row { flex-direction: row; }

  .win-pane {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    min-width: 0;
    min-height: 0;
  }

  /* A single window keeps the original borderless look. */
  #editor-container:not(.has-splits) .win-pane { border: 0; }

  #editor-container.has-splits.split-col > .win-pane + .win-pane {
    border-top: 1px solid var(--border);
  }
  #editor-container.has-splits.split-row > .win-pane + .win-pane {
    border-left: 1px solid var(--border);
  }

  /* The focused window gets a quiet accent edge, the way gvim dims the
     status line of every window but the current one. */
  #editor-container.has-splits .win-live::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  }

  #editor-container.has-splits .win-ghost { opacity: 0.82; cursor: pointer; }
  #editor-container.has-splits .win-ghost:hover { opacity: 0.95; }

  .win-gutter {
    background: var(--gutter-bg);
    color: var(--line-num);
    text-align: right;
    padding: 0 8px 0 6px;
    border-right: 1px solid var(--border);
    overflow: hidden;
    user-select: none;
    min-width: 54px;
    font-size: calc(var(--editor-font-size) - 1px);
    line-height: var(--editor-line-height);
  }

  .win-scroll {
    flex: 1;
    overflow: auto;
    position: relative;
  }

  .win-canvas {
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
    white-space: pre;
    padding: 0 10px;
    min-height: 100%;
  }

  /* ===== DIFF MODE ===== */
  /* Added, removed and changed lines, plus the filler rows that keep the
     two sides lined up — the same colour language gvim uses. */
  .editor-line.diff-add,
  .win-canvas .diff-add {
    background: color-mix(in srgb, var(--green) 16%, transparent);
  }
  .editor-line.diff-del,
  .win-canvas .diff-del {
    background: color-mix(in srgb, var(--red) 16%, transparent);
  }
  .editor-line.diff-chg,
  .win-canvas .diff-chg {
    background: color-mix(in srgb, var(--yellow) 14%, transparent);
  }

  .diff-filler {
    background: repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--border) 55%, transparent) 0 6px,
      transparent 6px 12px
    );
    opacity: 0.5;
  }
  .diff-filler .line-content { color: transparent; user-select: none; }

  .ln-row.ln-filler { opacity: 0.35; }
  .ln-row.ln-diff-add .ln-num { color: var(--green); }
  .ln-row.ln-diff-del .ln-num { color: var(--red); }
  .ln-row.ln-diff-chg .ln-num { color: var(--yellow); }

  /* ===== FOLDS ===== */
  .editor-line.fold-line .line-content { color: var(--text-dim); }
  .fold-summary {
    display: inline-block;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-left: 2px solid var(--accent);
    color: var(--text-dim);
    padding: 0 8px 0 6px;
    font-style: italic;
  }
  .ln-row.ln-fold .ln-num { color: var(--accent); font-weight: 600; }

  /* Below tablet width a vertical split would leave nothing readable, so
     stacked panes are the only shape that survives. */
  @media (max-width: 900px) {
    #editor-container.split-row { flex-direction: column; }
    #editor-container.has-splits.split-row > .win-pane + .win-pane {
      border-left: 0;
      border-top: 1px solid var(--border);
    }
  }