/* The layout of Zibaldone Text. Every color, size, radius and type step is a token
   from the design system's tokens.css (design-system/, synced by
   scripts/sync-design-system.sh). The two widths without a token come from
   the design system's own parts: --sidebar-width (components.css, the
   sidebar) and the 72ch measure (components.css, prose). */

@font-face {
  font-family: "Inter Variable";
  src: url("../design-system/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
}

:root {
  --sidebar-width: 240px;
  --measure: 72ch;
  --bar-h: var(--h-42);
  color-scheme: light dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font: var(--fw-400) var(--fs-13)/var(--lh-13) var(--font);
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}
/* the window's own buttons; RAMTT's parts (data-r) keep their padding and fill, which sit in
   @layer components and lose to any rule outside a layer (the comments panel's tabs, ZIB-313) */
:where(button:not([data-r])) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }
/* the vendored studio sheet (skelet.css) resets every button outside a layer too; the side
   panel's tabs take back the design system's own padding, fill and edge from @layer components */
[data-doc-rail] [data-r="tabs"] > [data-r="button"] { padding: revert-layer; background: revert-layer; border: revert-layer; }
/* ZIB-345: the side panel's head is RDS's (app/side-head.jsx): the vendored tabs are read and
   pressed but not shown, and the head takes the side panel's left edge for tabs */
[data-doc-rail] > [data-part="head"] > [data-ui="tabs"] { display: none; }
[data-doc-rail] > [data-part="head"]:has(> [data-side-tabs]) { padding-left: var(--space-8); }
[data-doc-rail] > [data-part="head"] > [data-r="button"] { padding: revert-layer; background: revert-layer; border: revert-layer; }
/* the empty comment field grows with its words but not with its hint, which wraps in the side
   panel and was cut off ("Select words in the text to comment on them"); it takes the hint's height */
[data-r="comment-box"] > textarea[data-part="text"]:placeholder-shown { field-sizing: content; }
kbd { font: inherit; color: var(--ink-2); }
svg.icon { width: var(--space-16); height: var(--space-16); flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.window { display: grid; grid-template-columns: var(--sidebar-width) 1fr; height: 100vh; }
.window[data-sidebar="closed"] { grid-template-columns: 0 1fr; }
.window[data-sidebar="closed"] .side { visibility: hidden; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.side { display: flex; flex-direction: column; min-width: 0; background: var(--ground); }
.side-top {
  height: var(--bar-h); flex: none; display: flex; align-items: center;
  padding: 0 var(--space-4) 0 var(--space-80); -webkit-app-region: drag;
}
/* ZIB-342: the app's name opens the list of Zibaldone's apps (design-system/app-switcher.css, the
   design system's part) and has the head to itself. The folder's name and the toggle between the
   document and the files are the line under it. */
.side-apps { display: flex; flex: 1; min-width: 0; -webkit-app-region: no-drag; }
/* as in the design system's sidebar head: the mark lines up with the text under it */
.side-apps > [data-r="app-switcher"] { margin-left: calc(-1 * var(--space-6)); }
.side-row { flex: none; display: flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-12) var(--space-8) var(--space-16); }
.side-row:has(> .side-folder:empty):has(> .side-switch:empty) { display: none; }
.side-folder { flex: 1; min-width: 0; color: var(--ink-3); font-weight: var(--fw-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree { flex: 1; overflow: auto; padding: 0 var(--space-8) var(--space-12); }
.window[data-folder="none"] .tree { display: none; }
.side-empty { display: none; padding: var(--space-16) var(--space-16); color: var(--ink-3); }
.window[data-folder="none"] .side-empty { display: block; }
.side-empty p { margin: 0 0 var(--space-12); }
/* A document tab: RAMTT's toggle switches the column between the document's own sidebar and every file. */
.side-switch { margin-left: auto; flex: none; -webkit-app-region: no-drag; }
.side-switch:empty { display: none; }
.side-document { display: none; flex: 1; min-height: 0; overflow: auto; padding: 0 var(--space-8) var(--space-12); }
.window[data-side-mode="app"] .side-document { display: flex; flex-direction: column; }
.window[data-side-mode="app"] .tree,
.window[data-side-mode="app"] .side-empty { display: none; }
/* ZIB-337: the foot of the sidebar holds Sync (app/sync-section.jsx): the other device, its state and
   the last sync. It belongs to the open folder, so it is gone while no folder is open. */
.side-sync { flex: none; padding: var(--space-4) var(--space-8) var(--space-12); }
.side-sync:empty, .window[data-folder="none"] .side-sync { display: none; }
/* a row with an action (Revoke) is a link button inside the row; the window's button reset takes
   its padding, and the paired device stood 8px left of Link a new device. It takes back @layer components' */
.side-sync [data-r="sidebar-item"] > [data-part="link"] { padding: revert-layer; }
/* ZIB-354: the Zibaldone account at the very foot (app/account.jsx): Sign in, or the account with
   Sign out in its menu. It is the sidebar part's own foot (data-r="sidebar"), so the account button
   takes RDS's look; it stays while no folder is open, as the account is not the folder's. */
.side-account { flex: none; overflow: visible; padding: var(--space-4) var(--space-8) var(--space-12); }
.side-account:empty { display: none; }
.side-sync:not(:empty) + .side-account { padding-top: 0; }
/* the sign in in a dialog: the dialog's header holds the step's question, the body the rest */
.account-sign-in { width: 100%; padding: 0; }
/* the dialog Link a new device: the code, then the devices nearby, one under the other */
.sync-body { display: flex; flex-direction: column; gap: var(--space-16); }
.sync-nearby { display: flex; flex-direction: column; gap: var(--space-6); }
.sync-text { margin: 0; color: var(--ink-2); }
.recent { margin-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-2); }
.recent button { text-align: left; color: var(--ink-2); padding: var(--space-4) 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent button:hover { color: var(--ink); }

/* The files: the design system's tree (tree, tree-item) on the ground. A row is a button,
   so it takes the row's whole width; the chosen file is aria-selected. */
.tree > .row { width: 100%; text-align: left; font: inherit; }
.tree > .row > [data-part="caret"]:empty { visibility: hidden; }


/* ── Main ────────────────────────────────────────────────────────────── */

.main {
  display: grid; grid-template-rows: var(--bar-h) 1fr auto; min-width: 0; min-height: 0;
  background: var(--paper); box-shadow: var(--ring-paper);
}
.window[data-sidebar="open"] .main { border-top-left-radius: var(--r-contain); border-bottom-left-radius: var(--r-contain); }
.bar { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8); -webkit-app-region: drag; min-width: 0; }
.window[data-sidebar="closed"] .bar { padding-left: var(--space-80); }
.bar [data-r="button"] { -webkit-app-region: no-drag; flex: none; }
.bar [data-r="button"][aria-pressed="true"] { background-color: var(--plane-selected); color: var(--ink); }
/* the window's own tools at the end of the bar, after the page's tools and a separator */
.window-tools { flex: none; gap: var(--space-2); flex-wrap: nowrap; }
.page-tools:empty + .bar-separator { display: none; }

.page-tools { flex: none; flex-wrap: nowrap; -webkit-app-region: no-drag; }
.page-tools:empty { display: none; }
/* The tabs: the design system's quiet tabs, each a window tab (a div that holds Close tab).
   Text's variant (2026-11-06, for the design system after): one row that scrolls and never
   wraps, a tab as wide as its name up to 220, and a changed file's dot in Close tab's place
   until the pointer or the choice shows Close tab. */
.tabs { flex: 1 1 auto; flex-wrap: nowrap; gap: var(--space-2); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs > .tab { flex: none; max-width: 220px; --pad-r: 2px; -webkit-app-region: no-drag; }
.tabs > .tab[aria-selected="true"] { pointer-events: auto; }
.tabs > .tab > .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs > .tab[data-dirty]::before { display: none; }
.tabs > .tab > .close { color: inherit; opacity: 0; }
.tabs > .tab:is([aria-selected="true"], :focus-within, :hover) > .close { opacity: 1; }
.tabs > .tab > .close:hover { background-color: var(--plane-selected-hover); color: var(--ink); }
.tabs > .tab > .close > .dot { display: none; width: 6px; height: 6px; border-radius: var(--r-round); background: var(--ink-3); }
.tabs > .tab[data-dirty]:not(:hover) > .close { opacity: 1; }
.tabs > .tab[data-dirty]:not(:hover) > .close > .dot { display: block; }
.tabs > .tab[data-dirty]:not(:hover) > .close > svg { display: none; }

.panes { display: grid; grid-template-columns: 1fr; min-height: 0; position: relative; }
.window[data-preview="on"] .panes { grid-template-columns: 1fr 1fr; }
.editor { min-width: 0; min-height: 0; display: flex; }
.editor > .cm-editor { flex: 1; min-width: 0; }
/* Zibaldone's page covers the panes ([data-document] in its layer). The design system's Page
   (layer components) sets position: relative, so the window says it here. */
.document-box > [data-document] { position: absolute; inset: 0; }
.preview { display: none; overflow: auto; padding: var(--space-32) var(--space-40) var(--space-96); user-select: text; box-shadow: inset 1px 0 0 var(--line-2); }
.window[data-preview="on"] .preview { display: block; }
/* no file open: the design system's empty state in the middle of the paper */
.blank { position: absolute; inset: 0; display: none; place-items: center; background: var(--paper); }
.window[data-empty="true"] .blank { display: grid; }
.blank [data-part="title"], .blank [data-part="text"] { margin-bottom: 0; }
.blank [data-r="key"] { margin-left: var(--space-2); }

/* the design system's status bar, on the paper of the editor */
.status[data-r="status-bar"] {
  --plane: var(--paper); --plane-hover: var(--paper-hover); --plane-selected: var(--paper-selected); --plane-selected-hover: var(--paper-selected-hover);
  --ring: var(--ring-paper); --ring-hover: var(--ring-paper-hover); --pill-rest: var(--paper);
  height: var(--row-28); padding: 0 var(--space-16); margin-right: 0; user-select: text; -webkit-user-select: text;
}
.status-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status-note[data-tone="warn"] { color: var(--accent); }

/* ── Editor ──────────────────────────────────────────────────────────── */

.window .editor .cm-editor { height: 100%; background: var(--paper); color: var(--ink); }
.window .editor .cm-editor.cm-focused { outline: none; }
.window .editor .cm-scroller { font-family: var(--font); font-size: var(--fs-16); line-height: var(--lh-16); overflow: auto; user-select: text; }
.window .editor .cm-content { max-width: var(--measure); margin: 0 auto; padding: var(--space-32) var(--space-24) var(--space-120); caret-color: var(--ink); }
.window .editor[data-kind="code"] .cm-scroller { font-family: var(--font-mono); font-size: var(--fs-13); line-height: var(--lh-13); }
.window .editor[data-kind="code"] .cm-content { max-width: none; margin: 0; padding: var(--space-16) var(--space-16) var(--space-120) var(--space-8); }
.window .editor .cm-line { padding: 0; }
.window .editor .cm-cursor { border-left: 1.5px solid var(--ink); }
.window .editor .cm-selectionBackground, .window .editor .cm-focused .cm-selectionBackground, .window .editor .cm-content ::selection { background: var(--selection) !important; }
.window .editor .cm-activeLine { background: transparent; }
.window .editor .cm-gutters { background: var(--paper); border: 0; color: var(--ink-4); }
.window .editor .cm-lineNumbers .cm-gutterElement { padding: 0 var(--space-12) 0 var(--space-16); }
.window .editor .cm-selectionMatch { background: var(--accent-tint); }
.window .editor .cm-matchingBracket, .window .editor .cm-focused .cm-matchingBracket { background: var(--accent-tint); color: inherit; }
.window .editor .cm-searchMatch { background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent-line); }
.window .editor .cm-searchMatch-selected { background: var(--selection); }
.window .editor .cm-panels { background: var(--ground); color: var(--ink); border-color: var(--line-2) !important; font-family: var(--font); font-size: var(--fs-13); }
.window .editor .cm-panel.cm-search { padding: var(--space-8) var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; }
.window .editor .cm-panel.cm-search input, .window .editor .cm-panel.cm-search button {
  font: inherit; color: var(--ink); background: var(--raised); border: 0; border-radius: var(--r-key);
  height: var(--h-24); padding: 0 var(--space-8); box-shadow: var(--ring-raised); margin: 0;
}
.window .editor .cm-panel.cm-search input[type="checkbox"] { height: auto; box-shadow: none; }
.window .editor .cm-panel.cm-search label { display: inline-flex; gap: var(--space-4); align-items: center; color: var(--ink-2); }
.window .editor .cm-panel.cm-search [name="close"] { box-shadow: none; background: none; color: var(--ink-3); }

/* Markdown and code tokens. */
.tk-h1 { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--fw-550); }
.tk-h2 { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); }
.tk-h3 { font-weight: var(--fw-550); }
.tk-strong { font-weight: var(--fw-550); }
.tk-em { font-style: italic; }
.tk-strike { text-decoration: line-through; color: var(--ink-3); }
.tk-link { color: var(--accent); }
.tk-code { font-family: var(--font-mono); font-size: 0.9em; }
.tk-quote { color: var(--ink-2); }
.tk-mark { color: var(--ink-4); }
.tk-list { color: var(--ink-2); }
.tk-keyword { color: var(--accent); }
.tk-string { color: var(--ink-2); }
.tk-comment { color: var(--ink-4); font-style: italic; }
.tk-number, .tk-type { color: var(--accent-ink); }
.tk-prop, .tk-fn { color: var(--ink); font-weight: var(--fw-500); }

/* ── Preview ─────────────────────────────────────────────────────────── */

.preview > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.preview { font-size: var(--fs-16); line-height: var(--lh-16); }
.preview h1 { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--fw-550); margin-top: 0; margin-bottom: var(--space-16); }
.preview h2 { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); margin: var(--space-32) auto var(--space-12); }
.preview h3, .preview h4 { font-size: var(--fs-16); font-weight: var(--fw-550); margin: var(--space-24) auto var(--space-8); }
.preview p, .preview ul, .preview ol, .preview blockquote, .preview pre, .preview table { margin-top: 0; margin-bottom: var(--space-16); }
.preview a { color: var(--accent); text-decoration: none; }
.preview a:hover { text-decoration: underline; }
.preview code { font-family: var(--font-mono); font-size: 0.9em; background: var(--ground); border-radius: var(--r-key); padding: 0 var(--space-4); }
.preview pre { background: var(--ground); border-radius: var(--r-value); padding: var(--space-12) var(--space-16); overflow: auto; }
.preview pre code { background: none; padding: 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.preview blockquote { color: var(--ink-2); padding-left: var(--space-16); box-shadow: inset 2px 0 0 var(--line-3); margin-left: auto; }
.preview hr { border: 0; height: 1px; background: var(--line-2); margin: var(--space-32) auto; }
.preview img { max-width: 100%; border-radius: var(--r-value); }
.preview table { border-collapse: collapse; font-size: var(--fs-14); }
.preview th, .preview td { padding: var(--space-6) var(--space-12); box-shadow: inset 0 -1px 0 var(--line-2); text-align: left; }
.preview th { font-weight: var(--fw-550); }

/* ── Go to file ──────────────────────────────────────────────────────── */

/* Go to a file: the design system's palette over the window's backdrop. A button item takes
   the row's width; the palette's list part holds the scroll. */
.quick { position: fixed; inset: 0; background: var(--backdrop); display: flex; justify-content: center; align-items: flex-start; padding-top: 13vh; z-index: 10; }
.quick[hidden] { display: none; }
.quick-box[data-r="palette"] { max-height: min(480px, 70vh); }
.quick-item[data-r="palette-item"] { width: 100%; text-align: left; font: inherit; }

/* ── The markdown editor ─────────────────────────────────────────────── */
/* Zibaldone's ProseMirror document (app/prose.js). Its blocks are plain tags, drawn here as
   the preview draws them, so a file looks the same in both. */

.editor > .prose-scroll { flex: 1; min-width: 0; overflow: auto; user-select: text; }
/* A document tab shows Zibaldone's page alone. The code view under it keeps the last code tab's
   text, which showed through a new, empty document. CodeMirror's base theme gives .cm-editor
   `display: flex !important`, so hiding it takes the same. */
.editor[data-kind="document"] > .cm-editor { display: none !important; }
.editor:not([data-kind="markdown"]) > .prose-scroll { display: none; }

/* ProseMirror's own base rules (prosemirror-view/style/prosemirror.css) */
.prose { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; }
.prose pre { white-space: pre-wrap; }
.prose li { position: relative; }
.prose-hideselection *::selection { background: transparent; }
.prose-hideselection { caret-color: transparent; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
.ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; top: calc(-1 * var(--space-2)); width: var(--space-20); border-top: 1px solid var(--ink); }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }

.prose {
  max-width: var(--measure); margin: 0 auto; padding: var(--space-32) var(--space-24) var(--space-120); outline: none;
  font-size: var(--fs-16); line-height: var(--lh-16); color: var(--ink); caret-color: var(--ink);
}
.prose ::selection { background: var(--selection); }
.prose > :first-child { margin-top: 0; }
.prose h1 { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--fw-550); margin: var(--space-32) 0 var(--space-16); }
.prose h2 { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); margin: var(--space-32) 0 var(--space-12); }
.prose h3 { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); margin: var(--space-24) 0 var(--space-8); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin: 0 0 var(--space-16); }
.prose li > p { margin: 0; }
.prose ul, .prose ol { padding-left: var(--space-24); }
.prose ul[data-check] { list-style: none; padding-left: var(--space-24); }
.prose ul[data-check] > li::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-24)); top: calc((var(--lh-16) - var(--space-14)) / 2);
  width: var(--space-14); height: var(--space-14); border-radius: var(--r-key); box-shadow: inset 0 0 0 1px var(--line-5);
}
.prose ul[data-check] > li[data-done="true"]::before { background: var(--ink); box-shadow: none; }
.prose ul[data-check] > li[data-done="true"] > p { color: var(--ink-3); text-decoration: line-through 1px var(--ink-4); }
.prose blockquote { color: var(--ink-2); padding-left: var(--space-16); box-shadow: inset 2px 0 0 var(--line-3); }
.prose pre { background: var(--ground); border-radius: var(--r-value); padding: var(--space-12) var(--space-16); font-family: var(--font-mono); font-size: var(--fs-13); line-height: var(--lh-13); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--ground); border-radius: var(--r-key); padding: 0 var(--space-4); }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose hr { border: 0; height: 1px; background: var(--line-2); margin: var(--space-32) 0; }
.prose hr.ProseMirror-selectednode { background: var(--ink-3); }
.prose a { color: var(--accent); text-decoration: none; }
.prose em { font-style: italic; }
.prose s { color: var(--ink-3); }
.prose mark { background: var(--accent-tint); color: inherit; border-radius: var(--r-key); }
.prose table { border-collapse: collapse; font-size: var(--fs-14); line-height: var(--lh-14); }
.prose th, .prose td { min-width: var(--space-80); padding: var(--space-6) var(--space-12); box-shadow: inset 0 -1px 0 var(--line-2); text-align: left; vertical-align: top; }
.prose th { font-weight: var(--fw-550); }
.prose td > p, .prose th > p { margin: 0; }
.prose [data-doc-pladsholder]::before { content: attr(data-doc-pladsholder); float: left; height: 0; color: var(--ink-3); pointer-events: none; }
.prose [data-doc-valgt] { border-radius: var(--r-key); box-shadow: 0 0 0 1px var(--line-5); }

/* the / menu, in the look of Go to file. Its width and height are the design system's menu
   part (components.css, [data-r="menu"][data-size="wide"] and --menu-max). */
.block-menu {
  position: fixed; z-index: 10; min-width: 280px; max-height: 420px; overflow: auto; padding: var(--space-6);
  background: var(--raised); border-radius: var(--r-contain); box-shadow: var(--ring-raised);
}
.block-menu[hidden] { display: none; }
.block-menu-section { padding: var(--space-8) var(--space-10) var(--space-4); color: var(--ink-4); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); }
.block-menu-section:first-child { padding-top: var(--space-4); }
.block-menu-item { display: flex; align-items: center; gap: var(--space-8); height: var(--row-32); padding: 0 var(--space-10); border-radius: var(--r-row); white-space: nowrap; }
.block-menu-item .icon { color: var(--ink-3); }
.block-menu-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.block-menu-item .hint { color: var(--ink-4); font-size: var(--fs-12); }
.block-menu-item[aria-selected="true"] { background: var(--raised-selected); }
.block-menu-empty { padding: var(--space-6) var(--space-10); color: var(--ink-3); }

/* Related (ZIB-322): a hit is also a design system list row, a flex line of one row's height.
   Related lays it out as a column: the paragraph wraps in the panel's width and its actions stand
   under it, as RelatedPanel.css sets them (the list's margin, the button's padding). */
[data-rel-hit][data-r="list-row"] { display: block; height: auto; margin: 0; padding: 0; white-space: normal; }
/* the rail's button reset takes the button's padding; RelatedPanel.css's own padding, again */
[data-rel-hit][data-r="list-row"] > button[data-rel-open] { padding: 6px 8px 2px; }

/* ── The split (ZIB-332) ─────────────────────────────────────────────────────
   Split, the panes stand side by side, each with its row of tabs over it, and a hairline between
   them that is dragged. The first pane's row is the tab bar's own tabs, moved down into the pane.
   The preview is hidden while the editor is split. */
.pane-head, .split-divider, .editor-2 { display: none; }
.window[data-split="on"] .panes {
  grid-template-columns: minmax(0, var(--split-first, 1fr)) 1px minmax(0, var(--split-second, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
}
.window[data-split="on"] .preview { display: none; }
.window[data-split="on"] .pane-head { display: flex; align-items: center; min-width: 0; padding: var(--space-4) var(--space-8); box-shadow: inset 0 -1px 0 var(--line-2); }
.window[data-split="on"] .pane-head[data-pane-head="1"] { grid-column: 1; grid-row: 1; }
.window[data-split="on"] .pane-head[data-pane-head="2"] { grid-column: 3; grid-row: 1; }
.window[data-split="on"] .editor { grid-column: 1; grid-row: 2; position: relative; }
.window[data-split="on"] .editor-2 { display: flex; grid-column: 3; grid-row: 2; position: relative; min-width: 0; min-height: 0; }
.window[data-split="on"] .split-divider { display: block; grid-column: 2; grid-row: 1 / 3; position: relative; background: var(--line-2); cursor: col-resize; }
.split-divider::after { content: ""; position: absolute; inset: 0 calc(-1 * var(--space-4)); }
.window[data-split="on"] .split-divider:hover, .window[data-dragging="split"] .split-divider { background: var(--line-5); }
.window[data-dragging="split"] { cursor: col-resize; user-select: none; }
.window[data-dragging="split"] iframe { pointer-events: none; }
/* the pane out of focus shows its tab a step quieter */
.window[data-split="on"][data-focus-pane="1"] [data-pane-tabs="2"] .tab[aria-selected="true"],
.window[data-split="on"][data-focus-pane="2"] [data-pane-tabs="1"] .tab[aria-selected="true"] { background: var(--paper-hover); }
/* the tab bar keeps its tools at its end */
.window[data-split="on"] .bar > [data-cmd="toggle-sidebar"] { margin-right: auto; }
/* the window's one row holds the window's height: without it the row grew to the page's own
   height and pushed the status line below the window's edge (measured on main as well) */
.window { grid-template-rows: minmax(0, 1fr); }