/* Dashboard. Type, colours and resets come from /fonts/type.css; the header from /dice/dice.css. */
html, body { height: 100%; }
body { background: var(--bg); }

/* ====== Page: fluid, full width (the widget sidebar floats over its right side) ====== */
.page {
  min-height: 100%;
  padding: 28px 40px;
  display: flex;
  flex-direction: column;
}
/* the shared header sits inside the page padding here */
.page .site-top {
  padding: 0;
  /* the content starts under the corner menu */
  margin-bottom: calc(var(--menu-rows, 5) * 22px);
}
.content {
  flex: 1;
  display: flex;
}
.placeholder {
  flex: 1;
  min-height: 60vh;
  background: var(--card);
  border-radius: 6px;
}

footer {
  margin-top: 22px;
  color: var(--muted);
}

/* ====== Sidebar: full height, pinned to the right edge, over the page ======
   Same background as the page, no border. Widgets are 280px wide with no padding of their own;
   the sidebar insets them 20px, lines the first one up with the header, and leaves one blank
   line (22px) between widgets. */
.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  overflow-y: auto;
  padding: 28px 20px 22px;
  background: var(--bg);
}
.panel:empty { display: none; }
.panel iframe {
  display: block;
  width: 100%;
  border: 0;
}
.panel iframe + iframe {
  margin-top: 22px;
}

/* ====== Narrow screens: the sidebar flows below the content ====== */
@media (max-width: 900px) {
  .page {
    min-height: 0;
    padding: 22px 16px;
  }
  .placeholder { min-height: 40vh; }
  .panel {
    position: static;
    width: 280px;
    padding: 0;
    margin: 0 16px 66px;
  }
}