/* robouse.ai file tree (/filetree.js): a split view of a tree and a preview. Tokens only (/tokens.css). */
.ft{--ft-w:280px;--ft-h:min(76vh,820px);--ind:14px;position:relative;display:grid;grid-template-columns:var(--ft-w) 1px minmax(0,1fr);grid-template-rows:var(--ft-h) auto;
  border:var(--hairline);border-radius:var(--r-lg);background:var(--panel);overflow:hidden;margin:0 0 var(--sp-20)}
.ft.resizing{cursor:col-resize;user-select:none}

/* tree pane */
.ft-tree{display:flex;flex-direction:column;min-width:0;min-height:0}
.ft-head{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-12) var(--sp-12) var(--sp-10);border-bottom:var(--hairline);background:var(--panel)}
.ft-pick .lb{width:100%}
.ft-root{display:flex;align-items:baseline;gap:var(--sp-8);min-width:0;font:400 var(--fs-caption)/1.4 var(--mono);color:var(--muted)}
.ft-rp{flex:1;direction:rtl;text-align:left}
.ft-commit{flex:none;color:var(--faint);font-variant-numeric:tabular-nums}
.ft-filter.search{background:var(--paper)}
.ft-rows{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--sp-6) var(--sp-6) var(--sp-12)}

/* a row: disclosure, name, size or count; indentation guides drawn per level */
.ft-row{position:relative;display:flex;align-items:center;gap:var(--sp-6);height:28px;padding:0 var(--sp-8) 0 calc(var(--sp-6) + var(--d) * var(--ind));border-radius:var(--r-sm);
  font:400 var(--fs-meta)/1 var(--mono);color:var(--ink2);cursor:pointer;user-select:none;transition:background var(--t-fast),color var(--t-fast)}
.ft-row::before{content:"";position:absolute;left:calc(var(--sp-6) + 6px);top:0;bottom:0;width:calc(var(--d) * var(--ind));pointer-events:none;
  background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px var(--ind))}
.ft-row:hover{background:var(--hover);color:var(--ink)}
.ft-row:focus-visible{z-index:1;outline:none;box-shadow:inset 0 0 0 1.5px var(--focus)}
.ft-row:focus-visible::before{opacity:0}
.ft-row.cur{background:var(--press);color:var(--ink)}
.ft-row.cur .ft-nm{font-weight:500}
.ft-row.cur .ft-mt{color:var(--muted)}  /* --faint on --press is 4.33:1 light, 4.13:1 dark; --muted reaches AA */
.ft-row.off .ft-nm{color:var(--muted)}
.ft-dis{flex:none;position:relative;width:12px;height:12px}
.ft-row.dir .ft-dis::before{content:"";position:absolute;left:3px;top:3px;width:5px;height:5px;border:solid var(--muted);border-width:0 1.3px 1.3px 0;transform:rotate(-45deg);transition:transform var(--t) var(--ease)}
.ft-row.dir[aria-expanded="true"] .ft-dis::before{transform:translate(0,-1px) rotate(45deg)}
.ft-nm{flex:1;line-height:28px}
.ft-row.dir .ft-nm{color:var(--ink)}
.ft-sl{color:var(--faint)}
.ft-nm mark{background:var(--sel-bg);color:inherit;border-radius:2px}
.ft-mt{flex:none;font:400 var(--fs-caption)/1 var(--mono);color:var(--faint);font-variant-numeric:tabular-nums;text-align:right;min-width:5ch}
.ft-empty{margin:var(--sp-16) var(--sp-8);font:400 var(--fs-meta)/1.5 var(--sans);color:var(--muted)}

/* splitter */
.ft-split{position:relative;background:var(--line);cursor:col-resize;touch-action:none}
.ft-split::after{content:"";position:absolute;inset:0 -4px;z-index:3}
.ft-split:hover,.ft-split:focus-visible,.ft.resizing .ft-split{background:var(--accent);outline:none}

/* preview pane */
.ft-view{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--paper)}
.ft-vh{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-6) var(--sp-16);min-height:calc(var(--ctl) + var(--sp-16));padding:var(--sp-8) var(--sp-16);border-bottom:var(--hairline);background:var(--panel)}
.ft-path{flex:1 1 240px;min-width:0;margin:0;font:400 var(--fs-meta)/1.4 var(--mono);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-dir{color:var(--muted)}
.ft-fn{font-weight:500}
.ft-meta{margin-left:var(--sp-12);font:400 var(--fs-caption)/1 var(--sans);color:var(--faint);font-variant-numeric:tabular-nums}
.ft-act{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-16);margin-left:auto}
.ft-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.ft-body:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px var(--focus)}
.ft-skel{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-20) var(--sp-20) var(--sp-20) calc(var(--sp-20) + 3ch)}
.ft-skel .skel{height:10px}

/* code with line numbers */
.ft-code{min-width:max-content;padding:var(--sp-10) 0 var(--sp-16);font:400 var(--fs-code)/1.65 var(--mono);color:var(--ink);tab-size:4;counter-reset:none}
.ft-code.wrap{min-width:0}
.ft-code .ln{display:grid;grid-template-columns:calc(var(--gut) + var(--sp-28)) minmax(0,1fr)}
.ft-code .n{position:sticky;left:0;padding:0 var(--sp-12) 0 var(--sp-8);background:var(--paper);color:var(--ghost);text-align:right;text-decoration:none;user-select:none;font-variant-numeric:tabular-nums}
.ft-code .n:hover{color:var(--ink2)}
.ft-code .c{padding:0 var(--sp-24) 0 var(--sp-4);white-space:pre}
.ft-code.wrap .c{white-space:pre-wrap;overflow-wrap:anywhere}
.ft-code .ln.sel{background:var(--accent-soft)}
.ft-code .ln.sel .n{background:var(--accent-soft);color:var(--accent)}
.ft-more{position:sticky;left:0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin:0 var(--sp-16) var(--sp-16);padding:var(--sp-10) var(--sp-12);
  border:var(--hairline);border-radius:var(--r-md);background:var(--panel);font:400 var(--fs-meta)/1.4 var(--sans);color:var(--muted)}
.t-k{color:var(--syn-kw)}.t-s{color:var(--syn-str)}.t-n{color:var(--syn-num)}.t-c{color:var(--syn-com);font-style:italic}
.t-key{color:var(--syn-key);font-weight:500}.t-v{color:var(--syn-var)}.t-fn{color:var(--syn-fn);font-weight:500}

/* markdown */
.ft-md{min-width:0;padding:var(--sp-20) var(--sp-24) var(--sp-24);font-size:var(--fs-ui);line-height:1.65;overflow-wrap:break-word}
.ft-md :not(pre) > code{overflow-wrap:anywhere}
.ft-md > :first-child{margin-top:0}
.ft-md h2{font-size:var(--fs-h4);margin:var(--sp-28) 0 var(--sp-8)}
.ft-md h3{font-size:var(--fs-ui);margin:var(--sp-24) 0 var(--sp-6)}
.ft-md h4,.ft-md h5,.ft-md h6{margin:var(--sp-20) 0 var(--sp-6);font:600 var(--fs-small)/1.4 var(--sans)}
.ft-md pre{font-size:var(--fs-caption)}
.ft-card{margin:var(--sp-16) var(--sp-24) 0;padding:var(--sp-14) var(--sp-16);border:var(--hairline);border-radius:var(--r-md);background:var(--panel)}
.ft-card p{margin:0}
.ft-card .fmt{margin:0 0 var(--sp-10);font:500 var(--fs-lede)/1.3 var(--serif);color:var(--ink)}
.ft-card .fmd{margin-top:var(--sp-10);font:400 var(--fs-small)/1.6 var(--sans);color:var(--ink2);max-width:var(--measure)}
.ft-card .chips{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.ft-card .tags{margin-top:var(--sp-10)}
.ft-fm{margin:var(--sp-16) var(--sp-24) 0;border:var(--hairline);border-radius:var(--r-md);background:var(--panel)}
.ft-fm summary{padding:var(--sp-8) var(--sp-12);font:400 var(--fs-meta)/1.4 var(--sans);color:var(--muted);cursor:pointer}
.ft-fm summary span{color:var(--faint);margin-left:var(--sp-6)}
.ft-fm pre{margin:0;border:0;border-top:var(--hairline);border-radius:0 0 var(--r-md) var(--r-md)}

/* JSON */
.ft-json{padding:var(--sp-12) var(--sp-16) var(--sp-20);font:400 var(--fs-code)/1.7 var(--mono);color:var(--ink)}
.ft-json .jk{padding-left:var(--sp-16);margin-left:var(--sp-4);border-left:var(--hairline)}
.ft-json summary{list-style:none;cursor:pointer;border-radius:var(--r-xs);margin-left:calc(-1 * var(--sp-14));padding-left:var(--sp-14);position:relative}
.ft-json summary::-webkit-details-marker{display:none}
.ft-json summary::before{content:"";position:absolute;left:var(--sp-2);top:.62em;width:5px;height:5px;border:solid var(--muted);border-width:0 1.3px 1.3px 0;transform:rotate(-45deg);transition:transform var(--t) var(--ease)}
.ft-json details[open] > summary::before{transform:translateY(-1px) rotate(45deg)}
.ft-json summary:hover{background:var(--hover)}
.ft-json .jp{color:var(--muted)}
.ft-json .jsum{margin:0 var(--sp-6);font:400 var(--fs-caption)/1 var(--sans);color:var(--faint)}
.ft-json details[open] > summary .jsum,.ft-json details[open] > summary .jc{display:none}
.ft-json .jmore{color:var(--faint);font-family:var(--sans);font-size:var(--fs-caption)}

/* media and notes */
.ft-media{display:flex;flex-direction:column;align-items:center;gap:var(--sp-10);padding:var(--sp-24)}
.ft-media video,.ft-media img{display:block;max-width:100%;max-height:calc(var(--ft-h) - 140px);border-radius:var(--r-md);border:var(--hairline)}
.ft-sprite{display:block;border-radius:var(--r-md);border:var(--hairline);background-repeat:no-repeat;image-rendering:auto}
.ft-cap{margin:0;font:400 var(--fs-meta)/1.4 var(--sans);color:var(--muted)}
.ft-off{margin:var(--sp-24);max-width:520px;text-align:left;border-style:solid;border-color:var(--line);background:var(--panel)}
.ft-off p{margin:var(--sp-10) 0 0}
.ft-note{grid-column:1/-1;margin:0;padding:var(--sp-10) var(--sp-16);border-top:var(--hairline);background:var(--panel);font:400 var(--fs-caption)/1.55 var(--sans);color:var(--muted)}
.ft-note code{font-size:.95em}

/* phones and narrow columns: stacked, the tree first */
@media (max-width:760px){
  .ft{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .ft-split{display:none}
  .ft-tree{max-height:46vh;border-bottom:var(--hairline)}
  .ft-view{min-height:320px;scroll-margin-top:var(--sp-12)}
  .ft-body{overflow-x:auto;overflow-y:hidden}
  .ft-view{min-height:0}
  .ft-vh{padding:var(--sp-8) var(--sp-12)}
  .ft-act{margin-left:0;width:100%}
  .ft-md{padding:var(--sp-16)}
  .ft-card,.ft-fm{margin:var(--sp-12) var(--sp-16) 0}
}
@media (pointer:coarse){.ft-row{height:var(--touch)}.ft-nm{line-height:var(--touch)}.ft-act .tbtn{min-height:var(--touch)}}

/* view toggle (Preview | Source, Tree | Source): one small segmented control */
.ft-seg{display:inline-flex;padding:var(--sp-2);border:var(--hairline);border-radius:var(--r-sm);background:var(--paper);margin-right:var(--sp-4)}
.ft-seg button{height:calc(var(--ctl-sm) - 6px);padding:0 var(--sp-10);border:0;border-radius:var(--r-xs);background:none;font:400 var(--fs-caption)/1 var(--sans);color:var(--muted);cursor:pointer;transition:color var(--t-fast),background var(--t-fast)}
.ft-seg button:hover{color:var(--ink)}
.ft-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-1)}
.ft-act{align-items:center}
.ft-vh:empty{display:none}  /* nothing selected yet: no empty header bar */
.ft-hint{margin:0;padding:var(--sp-16);font:400 var(--fs-meta)/1.5 var(--sans);color:var(--muted)}