/* File editor page: resizable tree on the left, tabbed CodeMirror editor on the right */
main:has(#fa){padding:0;overflow:hidden}
#fa{--fa-w:280px;display:flex;height:100%;min-height:0}
#fa-side{position:relative;flex:none;width:var(--fa-w);display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--bd);min-height:0}
#fa-handle{position:absolute;top:0;bottom:0;right:-3px;width:6px;cursor:ew-resize;z-index:6;touch-action:none}
#fa-handle:hover,#fa.dragging #fa-handle{background:var(--acc);opacity:.6}
#fa.dragging{user-select:none}
.fa-head{padding:10px 12px 6px}
.fa-title{display:flex;align-items:center;gap:4px;color:var(--fg);text-decoration:none;font-weight:700;font-size:15px}
.fa-title .mdi{color:var(--mut)}
.fa-app{display:flex;align-items:center;gap:6px;padding:0 10px 6px;font-size:12px;color:var(--mut);min-height:30px}
.fa-app .ap{flex:1;min-width:0;overflow-wrap:anywhere;font-family:ui-monospace,Menlo,monospace;color:var(--fg)}
.fa-app .ap.none{color:var(--mut);font-family:inherit}
.fa-app .auto{font-size:10px;border:1px solid var(--bd);border-radius:999px;padding:0 6px;color:var(--mut)}
.fa-app button{padding:2px 6px;font-size:12px;flex:none}
.fa-app input{flex:1;min-width:0;font:12px ui-monospace,Menlo,monospace;padding:4px 6px}
.fa-path{display:flex;gap:6px;padding:4px 10px 6px}
.fa-path button{padding:0;width:30px;height:30px;flex:none}
.fa-path input{flex:1;min-width:0;font:12px ui-monospace,Menlo,monospace}
.fa-filter{display:flex;align-items:center;gap:6px;margin:0 10px 8px;padding:0 8px;border:1px solid var(--bd);border-radius:6px;background:var(--bg);color:var(--mut)}
.fa-filter input{flex:1;min-width:0;border:0;background:none;padding:5px 0;outline:none;color:var(--fg)}
#fa-tree{flex:1;overflow:auto;padding-bottom:12px;border-top:1px solid var(--bd)}
.fa-row{display:flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;cursor:pointer;font-size:13px;white-space:nowrap;user-select:none}
.fa-row:hover{background:var(--bg)}
.fa-row.active{background:color-mix(in srgb,var(--acc) 16%,transparent);box-shadow:inset 3px 0 var(--acc)}
.fa-row .chev{width:14px;color:var(--mut);font-size:14px}
.fa-row .chev.none{visibility:hidden}
.fa-row .ico{color:var(--mut)}
.fa-row.dir>.ico{color:#d9a441}
.fa-row .nm{overflow:hidden;text-overflow:ellipsis}
.fa-row .lk{color:var(--mut);font-size:12px}
.fa-row.other{opacity:.5;cursor:default}
.fa-msg{padding:6px 10px 6px 30px;color:var(--mut);font-size:12px}
.fa-msg.err{color:var(--err)}
#fa-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
#fa-tabs{display:flex;overflow-x:auto;background:var(--card);border-bottom:1px solid var(--bd);min-height:36px;flex:none}
.fa-tab{display:flex;align-items:center;gap:6px;padding:0 6px 0 12px;border-right:1px solid var(--bd);cursor:pointer;white-space:nowrap;font-size:13px;color:var(--mut)}
.fa-tab.on{background:var(--bg);color:var(--fg);box-shadow:inset 0 -2px var(--acc)}
.fa-tab .dirty{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none;display:none}
.fa-tab.changed .dirty{display:block}
.fa-tab .x{border:0;background:none;padding:2px;color:inherit;border-radius:4px}
.fa-tab .x:hover{background:var(--card)}
#fa-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 12px;border-bottom:1px solid var(--bd);min-height:42px;flex:none}
#fa-bar .meta{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--mut);font-size:12px}
#fa-bar .meta .pth{color:var(--fg);font:12px ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
#fa-bar button{padding:5px 11px;font-size:13px}
#fa-banner{flex:none}
#fa-banner .bn{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--bd);font-size:13px}
#fa-banner .bn.ok{background:color-mix(in srgb,var(--ok) 10%,transparent)}
#fa-banner .bn.warn{background:color-mix(in srgb,var(--warn) 12%,transparent)}
#fa-banner .bn.err{background:color-mix(in srgb,var(--err) 12%,transparent)}
#fa-banner .bn .txt{flex:1;min-width:200px;overflow-wrap:anywhere}
#fa-banner .bn .acts{display:flex;gap:6px;flex-wrap:wrap}
#fa-banner .bn button{padding:3px 10px;font-size:12px}
#fa-editor{flex:1;min-height:0;position:relative;background:var(--bg)}
.fa-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mut)}
#fa-editor .CodeMirror{position:absolute;inset:0;height:auto}
.fa-hist .h{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--bd);font-size:13px}
.fa-hist .h:last-child{border:0}
.fa-hist .h button{margin-left:auto;padding:3px 10px;font-size:12px}
@media(max-width:800px){
  #fa{flex-direction:column;height:auto}
  #fa-side{width:auto;max-height:38vh;border-right:0;border-bottom:1px solid var(--bd)}
  #fa-handle{display:none}
  #fa-editor{height:65vh;flex:none}
}

/* modal + diff (shared look) */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--card);border:1px solid var(--bd);border-radius:14px;max-width:560px;width:100%;max-height:85vh;display:flex;flex-direction:column}
.modal h3{margin:0;padding:16px 18px 8px}
.modal .body{padding:0 18px;overflow:auto}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px}
.rawdiff{font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--bd);border-radius:8px;overflow:auto;max-height:50vh;margin-bottom:10px}
.rawdiff .dl{display:flex;gap:8px;padding:0 8px;white-space:pre}
.rawdiff .dl.add{background:color-mix(in srgb,var(--ok) 16%,transparent)}
.rawdiff .dl.del{background:color-mix(in srgb,var(--err) 16%,transparent)}
.rawdiff .dl.gap{color:var(--mut);justify-content:center}
.rawdiff .ln{color:var(--mut);min-width:36px;text-align:right;user-select:none}
.rawdiff .sg{width:10px;user-select:none}

/* CodeMirror theme driven by the app's CSS variables (light + dark) */
:root{--tk-kw:#a626a4;--tk-str:#0f7b3f;--tk-num:#b45309;--tk-com:#7a8290;--tk-def:#1d4ed8;--tk-bi:#0e7490;--tk-atom:#b45309;--tk-op:#5b6472;--tk-sel:#c7d7f5;--tk-tag:#b91c1c;--tk-attr:#b45309}
@media(prefers-color-scheme:dark){:root{--tk-kw:#d28bf0;--tk-str:#7ee2a0;--tk-num:#f0b36b;--tk-com:#6c7686;--tk-def:#7db4ff;--tk-bi:#6fd3e8;--tk-atom:#f0b36b;--tk-op:#9aa3af;--tk-sel:#2c4670;--tk-tag:#ff8f8f;--tk-attr:#f0b36b}}
#fa-editor .CodeMirror{background:var(--bg);color:var(--fg);font:13px/1.55 ui-monospace,Menlo,Consolas,"SF Mono",monospace}
#fa-editor .CodeMirror-gutters{background:var(--card);border-right:1px solid var(--bd)}
#fa-editor .CodeMirror-linenumber{color:var(--mut);padding:0 8px 0 6px}
#fa-editor .CodeMirror-cursor{border-left:2px solid var(--acc)}
#fa-editor .CodeMirror-selected,#fa-editor .CodeMirror-focused .CodeMirror-selected{background:var(--tk-sel)}
#fa-editor .CodeMirror-activeline-background{background:color-mix(in srgb,var(--acc) 9%,transparent)}
#fa-editor .CodeMirror-matchingbracket{color:var(--ok)!important;outline:1px solid var(--ok);background:transparent}
#fa-editor .CodeMirror-nonmatchingbracket{color:var(--err)!important}
#fa-editor .cm-keyword{color:var(--tk-kw);font-weight:600}
#fa-editor .cm-string,#fa-editor .cm-string-2{color:var(--tk-str)}
#fa-editor .cm-number{color:var(--tk-num)}
#fa-editor .cm-comment{color:var(--tk-com);font-style:italic}
#fa-editor .cm-def{color:var(--tk-def)}
#fa-editor .cm-builtin{color:var(--tk-bi)}
#fa-editor .cm-atom{color:var(--tk-atom);font-weight:600}
#fa-editor .cm-operator,#fa-editor .cm-punctuation,#fa-editor .cm-bracket{color:var(--tk-op)}
#fa-editor .cm-variable,#fa-editor .cm-variable-2,#fa-editor .cm-variable-3,#fa-editor .cm-property{color:var(--fg)}
#fa-editor .cm-tag{color:var(--tk-tag)}
#fa-editor .cm-attribute{color:var(--tk-attr)}
#fa-editor .cm-meta,#fa-editor .cm-qualifier{color:var(--tk-bi)}
#fa-editor .CodeMirror-foldmarker{color:var(--acc);text-shadow:none;font-family:inherit}
#fa-editor .CodeMirror-foldgutter-open,#fa-editor .CodeMirror-foldgutter-folded{color:var(--mut)}
#fa-editor .CodeMirror-dialog{background:var(--card);color:var(--fg);border-bottom:1px solid var(--bd)}
#fa-editor .CodeMirror-dialog input{background:var(--bg);color:var(--fg);border:1px solid var(--bd);border-radius:4px}