/* Page level layout only. The desktop program is an MDI application: a main window with a
   menu strip, a grey workspace, and each screen as a child window inside it. Same here. */

.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--topbar-height) - var(--menu-height) - var(--statusbar-height));
  background: var(--c-workspace);
}

#app {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-3);
}

#help {
  flex: 0 0 auto;
  width: 0;
  transition: width 0.15s ease;
}

body.help-open #help { width: var(--help-width); }

/* a child window */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 0 var(--s-3);
  background: var(--c-control);
  border: 1px solid var(--c-win-border);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.page > *:not(.page-header) { margin-left: var(--s-3); margin-right: var(--s-3); }

.page--narrow { max-width: 640px; }
.page--wide { max-width: none; }

.page-grid {
  display: grid;
  gap: var(--s-3);
}

.page-grid--2 { grid-template-columns: 1fr 1fr; }
.page-grid--3 { grid-template-columns: repeat(3, 1fr); }
.page-grid--side { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.page-grid--cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* a GroupBox */
.card {
  position: relative;
  border: 1px solid var(--c-etched);
  padding: var(--s-4) var(--s-3) var(--s-3);
  margin-top: 8px;
  background: transparent;
}

.card__title {
  position: absolute;
  top: -8px;
  left: 8px;
  padding: 0 4px;
  background: var(--c-control);
  font-size: var(--t-base);
  font-weight: 400;
  color: var(--c-text);
}

.stack > * + * { margin-top: var(--s-3); }
.row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.table-wrap { overflow-x: auto; background: var(--c-window); border: 1px solid var(--c-button-border); }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: var(--s-3) 0 var(--s-2); }
.section-title h2 { margin: 0; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--s-3); }
.kv dt { color: var(--c-text-gray); }
.kv dd { margin: 0; }

.centered-screen {
  min-height: calc(100vh - var(--topbar-height) - var(--menu-height) - var(--statusbar-height) - 2 * var(--s-3));
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .page-grid--2, .page-grid--3, .page-grid--side { grid-template-columns: 1fr; }
  #app { padding: var(--s-2); }
  body.help-open #help { width: 100%; }
  body.help-open #app { display: none; }
}