/* ==========================================================================
   The sidebar
   ========================================================================== */

#app {
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.3s ease;
}
body.side-collapsed #app { grid-template-columns: 0 1fr; }

/* the little door to the plan of rooms */
.side-toggle {
  position: fixed;
  top: 0.85rem;
  left: calc(15.5rem - 2.2rem - 0.85rem);
  z-index: 120;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: transparent;
  color: var(--sage-deep);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: left 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}
body.side-collapsed .side-toggle { left: 0.85rem; }
.side-toggle:hover { color: var(--pink-deep); border-color: var(--pink); }

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 15.5rem;
  display: flex;
  flex-direction: column;
  padding: 3.6rem 1.8rem 2rem;
  border-right: 1px solid var(--hairline);
  overflow-y: auto;      /* short windows: scroll rather than clip the sign-out */
  scrollbar-width: thin;
  transition: transform 0.3s ease, visibility 0.3s;
}
body.side-collapsed .side { transform: translateX(-100%); visibility: hidden; }
.side-foot { flex: none; padding-top: 1.5rem; }

.side-logo {
  width: 5.5rem;
  height: auto;
  display: block;
  /* left edge lines up with the roman numerals below (button border + padding) */
  margin: 0 0 2.4rem calc(0.9rem + 2px);
}

.main-nav { display: flex; flex-direction: column; gap: 0.15rem; counter-reset: room; }
.main-nav button::before {
  counter-increment: room;
  content: counter(room, upper-roman);
  display: inline-block;
  min-width: 1.7rem;
  font-size: 0.62rem;
  color: var(--sage);
}
.main-nav button {
  appearance: none;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  padding: 0.42rem 0 0.42rem 0.9rem;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.main-nav button:hover { color: var(--ink); }
.main-nav button.active { color: var(--pink-deep); border-left-color: var(--pink); }

.side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; }
.side-swallow { width: 9.5rem; height: auto; max-width: 100%; display: block; margin-bottom: 1rem; }

.logout-btn {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.logout-btn:hover { color: var(--pink-deep); border-color: var(--pink); }


/* Only mobile navigation needs a backdrop and an internal close button. */
.side-backdrop, .side-close { display: none; }

/* The same toggle stays fixed on desktop; the mobile header adds a section rail. */
.mobile-topbar { display: contents; }
.mobile-brand, .mobile-nav { display: none; }