/* Compact sidebar: everything fits on a laptop screen without scrolling.
   Less-used links sit under "More". On very short screens the link list scrolls. */
.side { gap: 10px; padding: 14px 12px 12px; overflow: hidden; }
.wordmark { font-size: 23px; padding: 2px 8px; }
.ws-switch { margin: 0 -2px; }
.ws-btn { padding: 5px 7px; border-radius: 10px; }
.ws-who b { font-size: 14px; }
.ws-who small { font-size: 11.5px; }
.ws-sq { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.create { height: 36px; font-size: 14px; box-shadow: 2px 2px 0 var(--red); flex: none; }
.create span { font-size: 17px; }
.create:hover { box-shadow: 3px 3px 0 var(--red); }

.side-nav { gap: 1px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.side-nav a, .side-more summary { gap: 10px; padding: 5px 9px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.side-nav a svg, .side-more summary svg { width: 16px; height: 16px; flex: none; }
.side-nav a em { font-size: 11px; }
.side-nav a em.new-em, .side-nav a.soon em.soon-em { font-size: 9px; padding: 0 6px; line-height: 16px; }

.side-more { display: flex; flex-direction: column; gap: 1px; }
.side-more summary { display: flex; align-items: center; list-style: none; cursor: pointer; color: var(--mute); font-weight: 500; user-select: none; }
.side-more summary::-webkit-details-marker { display: none; }
.side-more summary:hover { background: var(--paper2); color: var(--ink); }
.side-more .side-more-caret { margin-left: auto; transition: transform .15s; }
.side-more[open] .side-more-caret { transform: rotate(180deg); }
.side-more[open] summary { color: var(--ink2); }
.side-more > a { display: flex; }

.side-foot { flex: none; padding: 6px 8px 0; font-size: 12px; border-top: 1px solid var(--line); }
.side-foot .meter { height: 4px; margin: 4px 0 5px; }
.side-foot p { margin: 0 0 2px; }
.side-foot .tiny, .side-foot .tiny-link { font-size: 11px; }
.acct { margin: 0 -4px 8px; }
.acct-btn { padding: 5px 7px; }

/* Short screens: drop the extra footer lines first */
@media (max-height: 760px) {
  #saveNote { display: none; }
}
@media (max-height: 700px) {
  .wordmark { font-size: 20px; }
  .side { gap: 8px; padding-top: 10px; }
  .side-nav a, .side-more summary { padding-top: 3px; padding-bottom: 3px; }
  .side-foot .tiny-link { display: none; }
}