/* Portal sidebar (Andrew, 2026-11-12). Loaded on portal pages and added by the portal to every app page it
   serves, next to the app's own navbar. Every class starts with dip- so app styles don't clash. */
.dip-side, .dip-side *, .dip-mobile, .dip-mobile * {
  box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; line-height: 1.4; letter-spacing: normal; text-transform: none;
}
.dip-side {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 240px; display: flex; flex-direction: column;
  padding: 0 14px 20px; background: #fff; border-right: 1px solid #e7e7e7; color: #000; overflow-y: auto;
}
.dip-brand { display: flex; align-items: center; height: 64px; padding: 0 22px; margin: 0 -14px 14px; border-bottom: 1px solid #e7e7e7; } /* lines up with the 64px navbar */
.dip-brand img { display: block; height: 28px; width: auto; }
.dip-nav { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.dip-h { margin: 14px 10px 6px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; }
.dip-link {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 10px; border-radius: 9px;
  color: #000; background: none; text-decoration: none; font-size: .9rem; font-weight: 400;
}
.dip-link:hover { background: #f4f4f4; color: #000; text-decoration: none; }
.dip-link:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.dip-link.is-active { background: #000; color: #fff; }
.dip-link svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dip-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #c9c9c9; }
.dip-dot.up { background: #2d6c4e; }
.dip-dot.down { background: #a4322d; }
.dip-link.is-active .dip-dot.up { background: #7fd1a8; }
.dip-soon { margin-left: auto; font-size: .68rem; color: #6b6b6b; }
.dip-link.is-active .dip-soon { color: #ccc; }


/* Phones and small tablets: the sidebar becomes a button at the bottom left. */
.dip-mobile { display: none; }
@media (min-width: 900px) {
  body { margin-left: 240px !important; }
  .topbar .topbar-brand { display: none !important; } /* the app's logo: the sidebar already shows it */
}
@media (max-width: 899px) {
  .dip-side { display: none; }
  .dip-mobile { display: block; position: fixed; left: 16px; bottom: 16px; z-index: 40; }
  .dip-mobile > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    border-radius: 999px; background: #000; color: #fff; font-size: .82rem; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  }
  .dip-mobile > summary::-webkit-details-marker { display: none; }
  .dip-mobile .dip-panel {
    position: absolute; left: 0; bottom: calc(100% + 10px); width: min(280px, calc(100vw - 32px)); padding: 10px;
    background: #fff; border: 1px solid #e7e7e7; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); color: #000;
  }
}