/* Palette carried over from the original site: GitHub-dark tiers with the
   vault's own electric accent. Four surface tones, not two, which is what
   gives the explorer its depth. */
:root{
  --bg:#0e1117; --header:#010409; --panel:#161b22; --surface:#1c2128;
  --border:#30363d; --border-hi:#484f58;
  --accent:#00c8ff; --accent-dim:#0a3a4f;
  --text:#c9d1d9; --muted:#8b949e;
  --public:#3fb950; --internal:#d29922; --private:#a371f7; --danger:#f85149;
  --mono:ui-monospace,'SFMono-Regular','Consolas','Liberation Mono',monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,select,input{font:inherit;color:var(--text)}
button,select{background:var(--surface);border:1px solid var(--border);
  border-radius:5px;padding:2px 7px;cursor:pointer;font-size:.82rem}
button:hover,select:hover{border-color:var(--border-hi)}
button.danger:hover{border-color:var(--danger);color:var(--danger)}
input[type=text],input[type=password]{background:var(--bg);
  border:1px solid var(--border);border-radius:5px;padding:5px 8px}
input:focus,button:focus-visible,select:focus,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}

.bar{display:flex;align-items:center;gap:16px;padding:9px 16px;
  background:var(--header);border-bottom:1px solid var(--border);flex:0 0 auto}
.brand{font-weight:700;letter-spacing:.1em;color:var(--accent)}
.bar .ver{font-family:var(--mono);font-size:.68rem;color:var(--muted);
  border:1px solid var(--border);border-radius:20px;padding:1px 8px;
  cursor:default}
.login .hint.ver{font-family:var(--mono);font-size:.7rem;opacity:.65}
.bar .who{margin-left:auto;color:var(--muted);font-size:.82rem}
.bar .who em{font-style:normal;color:var(--accent)}
.bar .out{color:var(--muted);font-size:.82rem}

main{flex:1 1 auto;min-height:0}
/* The sidebar width is a variable so the splitter has one thing to move, and
   vault.js restores it from localStorage before the first paint. */
#container{display:grid;grid-template-columns:var(--side,320px) 5px minmax(0,1fr);
  height:100%}
#splitter{cursor:col-resize;background:var(--border);
  border:0 solid transparent;border-left-width:2px;border-right-width:2px;
  background-clip:padding-box;touch-action:none}
#splitter:hover,#splitter:focus-visible,#container.sizing #splitter{
  background:var(--accent);outline:none}
/* While dragging, the pointer owns the page: without this, moving over the
   file list selects text and an iframe in the pane swallows the mouse. */
#container.sizing{user-select:none}
#container.sizing #pane iframe,#container.sizing #pane object{
  pointer-events:none}
/* One column on a phone, and nothing to drag. */
@media (max-width:820px){
  #container{grid-template-columns:1fr;height:auto}
  #splitter{display:none}
}

#sidebar{background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-height:0}
#sidebar-header{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--border);background:var(--header)}
#sidebar-header h4{margin:0;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted)}
#sidebar-header .mk{margin-left:auto;display:flex;gap:5px}
#sidebar-header .mk input{width:118px;font-size:.8rem;padding:3px 7px}

/* Breadcrumb. Sits where the "Files" heading did and keeps its type, so the
   header reads as a label until you are somewhere, and as a path after. */
#crumbs{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;
  overflow:hidden}
.crumb{background:none;border:none;border-radius:0;padding:0 2px;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb:hover{color:var(--accent);border-color:transparent}
/* The last crumb is where you are, so it is the one that is not a link. */
.crumb.here{color:var(--text);cursor:default}
.crumb.here:hover{color:var(--text)}
#crumbs .sep{color:var(--border-hi);font-size:.7rem;flex:0 0 auto}

ul.tree{list-style:none;margin:0;padding:0}
#sidebar>ul.tree{overflow:auto;padding:6px 0 20px;flex:1 1 auto}
ul.tree ul.tree{padding-left:14px;border-left:1px solid var(--border);
  margin-left:11px}
.node .row{display:flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:4px}
.node .row:hover{background:var(--surface)}
.node.sel>.row{background:var(--accent-dim)}
.node .name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* The size gives way before the name does when the column gets tight. */
.node .row:hover .size{opacity:.5}
/* Scoped to the folder's OWN row. As a descendant selector this also painted
   every file nested inside the folder, which quietly cancelled the type tints
   below for anything not sitting at the root. */
.node.folder>.row>.name{color:var(--text);font-weight:600}
.node.folder.own>.row>.name{color:var(--private)}
.node.folder.own>.row>.name em{font-style:normal;font-size:.68rem;
  color:var(--muted);margin-left:6px;text-transform:uppercase;
  letter-spacing:.07em}
.node .size{color:var(--muted);font-family:var(--mono);font-size:.72rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Icons rest visible rather than appearing on hover: an action nobody can
   see is an action nobody uses. The opacity below is what does the hovering. */
.node .acts{display:flex;gap:5px;align-items:center;white-space:nowrap}
.node .acts a{display:flex;align-items:center}

/* Icons are dark PNGs, so they are inverted to sit on a dark surface. Resting
   at 0.4 keeps a row of them quiet until the row is under the cursor. */
.icon{width:14px;height:14px;cursor:pointer;opacity:.4;filter:invert(1);
  transition:opacity .12s,transform .12s}
.icon:hover,.icon:focus-visible{opacity:.9;transform:scale(1.15)}

/* Type tints: a wash on the name, not the whole row, so the tree still reads
   as one surface. */
.k-doc .name{color:#9ad1ff}
.k-code .name{color:#a5d6a7}
.k-data .name{color:#ffcc80}
.k-image .name{color:#f8bbd0}
.k-media .name{color:#ce93d8}
.k-pack .name{color:#bcaaa4}
.k-pdf .name{color:#ef9a9a}
.k-notebook .name{color:#f5a05a}

.twist{background:none;border:none;padding:0;width:16px;color:var(--text);
  transition:transform .12s;font-size:.85rem;opacity:.75}
.twist:hover{opacity:1;color:var(--accent)}
.node.open>.row .twist{transform:rotate(90deg)}
.kids{display:none}
.node.open>.kids{display:block}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot.v-public{background:var(--public)}
.dot.v-internal{background:var(--internal)}
.dot.v-private{background:var(--private)}
ul.tree .empty{color:var(--muted);padding:4px 14px;font-size:.8rem}

/* The folder you are in: where an upload lands and where a new folder is
   made. A tree shows every folder at once, so this has to be marked rather
   than left to be inferred from what is on screen. Deliberately not the same
   look as .sel, which says which FILE the pane is showing — they are two
   different questions and are often answered by two different rows. */
.node.folder.cur>.row{background:var(--surface);
  box-shadow:inset 3px 0 0 var(--accent)}
.node.folder.cur>.row .name{color:var(--accent)}

/* Dragging a file into a folder. The row being lifted fades; the row it would
   land in is outlined. Private folders never light up: the engine is the only
   thing that puts files in one. */
.node.file .row[draggable=true]{cursor:grab}
.node.lifting{opacity:.4}
.row.drop-into,#sidebar-header.drop-into{background:var(--accent-dim);
  outline:2px dashed var(--accent);outline-offset:-2px}

#main-wrap{display:flex;flex-direction:column;min-width:0;min-height:0;
  position:relative}
#pane{flex:1 1 auto;overflow:auto;padding:16px 20px}
#pane.dragging{outline:3px dashed var(--accent);outline-offset:-10px;
  background:var(--accent-dim)}
/* The header is its own band across the top of the pane, as it was
   originally: a slight gradient off the surface tone, ruled off below. */
.pane-head{display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--panel) 100%);
  border-bottom:1px solid var(--border);
  padding:10px 20px;margin:-16px -20px 16px}
.pane-head h3{margin:0;font-size:1rem;word-break:break-all}
.pane-head .vis{margin-left:auto;font-size:.76rem;text-transform:lowercase}
.pane-head .dl{font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  padding:4px 10px;border:1px solid var(--accent);border-radius:3px;
  white-space:nowrap}
.pane-head .dl:hover{background:var(--accent);color:var(--bg);
  text-decoration:none}
#placeholder{height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:var(--muted)}
#drag-icon{width:64px;height:64px;opacity:.22;filter:invert(1);
  margin-bottom:6px}
#new-group-btn{margin-left:auto;font-size:.9rem;line-height:1;padding:3px 8px}
.drop-hint{font-size:1.05rem;color:var(--text)}
.note{color:var(--muted)}
.note.error,.error{color:var(--danger)}
#pane pre{background:var(--panel);border:1px solid var(--border);
  border-radius:6px;padding:12px;overflow-x:auto;font-size:.8rem;
  position:relative}
#pane img{max-width:100%;height:auto;border-radius:6px}
#pane object.pdf{width:100%;height:calc(100vh - 190px);min-height:420px;
  border:1px solid var(--border);border-radius:6px;background:var(--panel)}
#pane table{border-collapse:collapse}
#pane td,#pane th{border:1px solid var(--border);padding:5px 9px}
#pane .md strong{font-weight:700;color:#fff}
#pane .md p,#pane .md ul,#pane .md ol{margin:.7em 0}
/* --- a folder's own page ------------------------------------------------ */
.folder-head .tally{margin-left:auto;font-size:.76rem;white-space:nowrap}
/* Tall like the PDF frame, and for the same reason: it holds a whole
   document. It cannot resize itself to its content — that needs a script
   inside it talking to this page, and the sandbox is there to stop exactly
   that — so it scrolls on its own instead. */
#pane iframe.page{width:100%;height:calc(100vh - 250px);min-height:400px;
  border:1px solid var(--border);border-radius:6px;background:var(--panel)}
#pane .note.src{font-size:.72rem;margin:6px 2px 0;font-family:var(--mono)}
.folder-body{margin-top:22px}
.folder-body .sec{margin:0 0 8px;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--border);padding-bottom:5px}
ul.listing{list-style:none;margin:0;padding:0;max-width:720px}
ul.listing li{display:flex;align-items:center;gap:8px;padding:4px 6px;
  border-radius:5px}
ul.listing li:hover{background:var(--surface)}
ul.listing a{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--text)}
ul.listing li.folder a{font-weight:600}
ul.listing li.own a{color:var(--private)}
ul.listing .ico{color:var(--muted);font-size:.7rem;width:9px}
ul.listing .size{color:var(--muted);font-family:var(--mono);font-size:.72rem}
ul.listing li.k-doc a{color:#9ad1ff}
ul.listing li.k-code a{color:#a5d6a7}
ul.listing li.k-data a{color:#ffcc80}
ul.listing li.k-image a{color:#f8bbd0}
ul.listing li.k-media a{color:#ce93d8}
ul.listing li.k-pack a{color:#bcaaa4}
ul.listing li.k-pdf a{color:#ef9a9a}
ul.listing li.k-notebook a{color:#f5a05a}

.copy{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .12s}
#pane pre:hover .copy{opacity:1}

.linkbox{display:flex;gap:7px;max-width:640px}
.linkbox input{flex:1 1 auto;font-family:var(--mono);font-size:.8rem}

#progress{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--surface)}
#bar{height:100%;width:0;background:var(--accent);transition:width .15s}

.login{max-width:380px;margin:14vh auto;text-align:center;
  display:flex;flex-direction:column;gap:14px}
.login h1{margin:0;font-size:1.9rem;letter-spacing:.14em;color:var(--accent)}
.login .sub,.login .hint{color:var(--muted);font-size:.85rem;margin:0}
.login form{display:flex;flex-direction:column;gap:10px}
.login input{text-align:center}
.login button{padding:8px}
code{font-family:var(--mono);font-size:.85em}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--accent);padding:8px 14px;
  border-radius:6px;font-size:.84rem;opacity:0;pointer-events:none;
  transition:opacity .18s;max-width:80vw;word-break:break-all;z-index:20}
#toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Modal: click the button, then type. Keeps the sidebar free of an input box
   that would otherwise be competing with file names for width. */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;
  align-items:center;justify-content:center;z-index:100}
.modal-overlay[hidden]{display:none}
.modal-panel{background:var(--panel);border:1px solid var(--border-hi);
  border-radius:6px;width:460px;max-width:94vw;padding:14px;
  display:flex;flex-direction:column;gap:11px}
.modal-header{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.modal-header button{background:none;border:none;color:var(--muted);
  font-size:.9rem;padding:0}
.modal-header button:hover{color:var(--danger)}
.modal-panel .dest{margin:-4px 0 0;font-size:.8rem}
.modal-panel .dest span{color:var(--accent);font-family:var(--mono)}
.modal-footer{display:flex;justify-content:flex-end;gap:8px}
.modal-footer button{font-family:var(--mono);font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 12px}

/* Prism overrides. The vendored theme is Prism's light default — black text
   with a white shadow behind it — which on this panel renders code as a grey
   smudge. These are the original site's token colours, a GitHub-dark set. */
#pane code[class*="language-"],#pane pre[class*="language-"]{
  background:none;color:var(--text);font-family:var(--mono);
  font-size:.8rem;text-shadow:none}
#pane .token.comment,#pane .token.prolog,#pane .token.doctype{color:#6e7681}
#pane .token.keyword,#pane .token.operator{color:#ff7b72;font-weight:600}
/* The light theme paints operators and entities on a half-white background,
   which is invisible on white and a grey block on this panel. */
#pane .token.operator,#pane .token.entity,#pane .token.url,
#pane .language-css .token.string,#pane .style .token.string{background:none}
#pane .token.string,#pane .token.char{color:#a5d6ff}
#pane .token.number,#pane .token.boolean{color:#79c0ff}
#pane .token.function{color:#d2a8ff}
#pane .token.class-name{color:#ffa657}
#pane .token.punctuation{color:#8b949e}
#pane .token.property,#pane .token.tag{color:#7ee787}
#pane .token.attr-name{color:#ffa657}
#pane .token.attr-value{color:#a5d6ff}