/* The left bar, shared by the editor and the search page. See sidebar.js. */
/* ── The left bar ──
   Fixed to the left edge; the page makes room for it with padding, so
   nothing else in the layout (the three panes, the dialogs, the library's
   full-width reader) has to know it exists beyond --side-w. Collapsed, it
   is a rail of icons with the names as tooltips. */
:root{--side-w:15rem; --side-bg:#F4F3EF; --side-hover:#E9E7E0; --side-here:#E3E1DA}
body{padding-left:var(--side-w)}
body.side-collapsed{--side-w:3.6rem}
.side{
  position:fixed; z-index:30; top:0; bottom:0; left:0; width:var(--side-w);
  display:flex; flex-direction:column; gap:.1rem;
  background:var(--side-bg); border-right:1px solid var(--rule);
  padding:.8rem .55rem .7rem; overflow-y:auto; overflow-x:hidden;
}
@media (prefers-reduced-motion:no-preference){
  .side, body{transition:width .18s ease, padding-left .18s ease}
}
.side-top{display:flex; align-items:center; justify-content:space-between;
  padding:0 .15rem .7rem .3rem; min-height:2.4rem}
.side-brand{display:flex; align-items:center; gap:.55rem; color:var(--ink); text-decoration:none; min-width:0}
/* The TeX logo, lowered E and all, as the mark. */
.side-mark{
  flex:none; width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:.9rem; font-weight:600; white-space:nowrap;
  color:#fff; background:var(--texblue); border-radius:7px; line-height:1;
}
.side-mark sub{font-size:1em; vertical-align:-.28em; margin:0 -.13em 0 -.16em; line-height:0}
.side-name{font-size:1.2rem; font-weight:600; letter-spacing:.01em}
/* The bar's own controls are not the paper's buttons: no box, no small
   caps, a row you can hit anywhere along its width. */
.side button, .side .side-item{
  font-family:var(--serif); font-variant:normal; letter-spacing:0;
  border:none; background:none; border-radius:8px; color:var(--ink);
}
.side-item{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  padding:.48rem .6rem; font-size:.98rem; line-height:1.2; text-decoration:none;
  cursor:pointer; white-space:nowrap; min-height:2.4rem;
}
.side-item:hover{background:var(--side-hover)}
.side-item.here{background:var(--side-here); font-weight:600; cursor:default}
.side-item[hidden]{display:none}
.side-item:focus-visible, .side-toggle:focus-visible, .side-fold:focus-visible{
  outline:2px solid var(--texblue); outline-offset:-2px}
.side-ico{flex:none; width:1.25rem; height:1.25rem; display:grid; place-items:center; color:var(--faint)}
.side-ico svg{width:1.2rem; height:1.2rem}
.side-item:hover .side-ico, .side-item.here .side-ico{color:var(--ink)}
.side-label{overflow:hidden; text-overflow:ellipsis}
/* New: the circle, like a primary action should look in a list of rows. */
.side-new{margin-bottom:.35rem}
.side-new .side-ico{
  width:2rem; height:2rem; margin:-.3rem -.35rem -.3rem -.35rem;
  border-radius:50%; background:var(--paper); border:1px solid var(--rule); color:var(--ink)}
.side-new:hover .side-ico{border-color:var(--texblue); color:var(--texblue)}
.side-nav{display:flex; flex-direction:column; gap:.1rem}
.side-head{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font-size:.86rem; color:var(--faint); padding:.9rem .6rem .3rem; white-space:nowrap;
}
.side-fold{cursor:pointer; text-align:left}
.side-fold:hover{color:var(--ink)}
.side-fold::after{
  content:""; width:.45rem; height:.45rem; flex:none; margin-right:.2rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}
.side-fold[aria-expanded=false]::after{transform:rotate(-45deg)}
.side-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.05rem}
.side-list[hidden]{display:none}
.side-list .side-item{font-size:.92rem; padding:.38rem .6rem; min-height:2.1rem}
.side-proj .side-ico{width:.55rem}
.side-proj .side-ico::before{content:""; width:.36rem; height:.36rem; border-radius:50%; background:var(--rule)}
.side-proj.here .side-ico::before{background:var(--texblue)}
.side-empty{font-size:.9rem; color:var(--faint); padding:.3rem .6rem; opacity:.85}
.side-more{color:var(--faint)}
.side-fill{flex:1; min-height:1rem}
/* The account stays put while a long file list scrolls under it. */
.side-foot{border-top:1px solid var(--rule); padding-top:.55rem; position:sticky; bottom:-.7rem;
  background:var(--side-bg); margin:0 -.55rem -.7rem; padding:.55rem .55rem .7rem}
body.side-collapsed .side-foot{margin:0 -.4rem -.7rem; padding:.55rem .4rem .7rem}
.side-foot .account{flex-direction:column; align-items:stretch; gap:.1rem}
.side-foot .account[hidden]{display:none}
.side-foot #accountOut{flex-direction:row; gap:.4rem}
.side-foot #accountOut button{flex:1; padding:.4rem .5rem; font-size:.9rem; border:1px solid var(--ink); border-radius:6px}
.side-foot #signUpBtn{background:var(--ink); color:#fff}
.side-foot #signUpBtn:hover{background:#3A3833}
.side .whoami-btn{max-width:none; font-size:.95rem}
.side-top-acts{display:flex; align-items:center; gap:.15rem; flex:none}
.side-toggle{
  width:2.1rem; height:2.1rem; padding:0; display:grid; place-items:center; flex:none;
  cursor:pointer; color:var(--faint)}
.side-toggle:hover{background:var(--side-hover); color:var(--ink)}
.side-toggle svg{width:1.2rem; height:1.2rem}

/* ── The project and its files ──
   The title is the project's name, set like one; the paper switch sits
   under it when there is more than one paper. Files are rows like every
   other row here, with the kind on the right. */
.side-files{margin-top:.35rem}
.side-project{padding:.55rem .6rem .1rem}
.side-project input{
  width:100%; font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid transparent;
  padding:.15rem 0; border-radius:0;
}
.side-project input::placeholder{color:var(--faint); font-weight:400; font-style:italic}
.side-project input:hover{border-bottom-color:var(--rule)}
.side-project input:focus{outline:none; border-bottom-color:var(--texblue)}
.side-project #paperSwitch{width:100%; max-width:none; margin-top:.35rem; font-size:.82rem}
.side-head-acts{gap:.15rem; padding-top:.6rem}
.side-head-acts .side-fold{
  flex:1; display:flex; align-items:center; justify-content:space-between;
  padding:0; font-size:inherit; color:inherit; min-width:0;
}
.side .side-mini{
  width:1.7rem; height:1.7rem; padding:0; display:grid; place-items:center; flex:none;
  color:var(--faint); border-radius:6px; cursor:pointer;
}
.side .side-mini:hover{background:var(--side-hover); color:var(--texblue)}
.side .side-mini svg{width:1rem; height:1rem}
.side-files-body[hidden]{display:none}
.side #fileTree{padding:.1rem 0; overflow:visible; display:flex; flex-direction:column; gap:.05rem}
.side #fileTree li{
  border:none; border-radius:8px; padding:.36rem .45rem .36rem .6rem; gap:.5rem;
  font-size:.92rem; min-height:2.1rem;
}
/* A page with a folded corner, drawn in CSS: the file's icon. */
.side #fileTree li::before{
  content:""; flex:none; width:.72rem; height:.9rem; border:1.4px solid var(--faint);
  border-radius:1.5px; border-top-right-radius:4px; box-sizing:border-box; margin-right:.1rem;
}
.side #fileTree li:hover{background:var(--side-hover)}
.side #fileTree li.active{background:var(--side-here); font-weight:600}
.side #fileTree li.active::before{border-color:var(--texblue)}
.side #fileTree .row-act{padding:0 .1rem; border-radius:4px}
.side .budget{border-top:none; padding:.45rem .6rem .2rem; font-size:.64rem; cursor:help}
.side .budget .gauge{background:var(--side-hover)}
.side .budget .note{display:none}
.side .budget.warn .note, .side .budget.over .note{display:block}
/* The drop target appears while something is being dragged in: the whole
   page takes the drop, so it only has to say where it will land. */
.side .dropzone{display:none; margin:.45rem .3rem; border-radius:8px; background:var(--paper)}
#filesPane.dragover .dropzone{display:block}
.side-rail-only{display:none}

/* Collapsed: icons only. The brand gives way to the toggle, which is the
   one thing you need to get the names back. */
body.side-collapsed .side{padding-left:.4rem; padding-right:.4rem}
body.side-collapsed .side-label,
body.side-collapsed .side-sec,
body.side-collapsed .side-head,
body.side-collapsed .side-brand,
body.side-collapsed #accountOut #signUpBtn{display:none}
body.side-collapsed .side-rail-only{display:flex}
body.side-collapsed .side-top{justify-content:center; padding:0 0 .7rem}
body.side-collapsed .side-top-acts{flex-direction:column-reverse; gap:.35rem}
body.side-collapsed .side-item{justify-content:center; padding:.48rem 0; gap:0}
body.side-collapsed .side-foot #accountOut button{padding:.35rem .1rem; font-size:.72rem}
/* A narrow window gets the rail by default; the toggle still opens it,
   over the page rather than beside it. */
@media (max-width:760px){
  body{--side-w:3.6rem}
  body:not(.side-open) .side-label, body:not(.side-open) .side-sec,
  body:not(.side-open) .side-head, body:not(.side-open) .side-brand,
  body:not(.side-open) #accountOut #signUpBtn{display:none}
  body:not(.side-open) .side-rail-only{display:flex}
  body:not(.side-open) .side-item{justify-content:center; padding:.48rem 0; gap:0}
  body:not(.side-open) .side-top{justify-content:center; padding:0 0 .7rem}
  body:not(.side-open) .side-top-acts{flex-direction:column-reverse; gap:.35rem}
  body:not(.side-open) .side{padding-left:.4rem; padding-right:.4rem}
  body.side-open .side{width:15rem; box-shadow:0 0 0 100vmax rgba(28,27,24,.25)}
}