/* Fill the browser viewport on phones, tablets and desktop. */
html, body { background: #0c1422; }
body { padding: 0; }
#mo-v4 { width: 100%; max-width: none; margin: 0; }
#mo-v4 > .mb-3 { display: none; }
#mo-v4 .phone {
  width: 100%; max-width: none; height: 100vh; height: 100dvh; margin: 0;
  border: 0; border-radius: 0; display: flex; flex-direction: column;
}
#mo-v4 .phone > header, #mo-v4 .phone > .nav,
#mo-v4 .phone > .px-4 { flex-shrink: 0; }
#mo-v4 .pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
#mo-v4 .nav { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
#mo-v4 .mo-home-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 22px 36px 34px 48px;
  align-items: center; gap: 6px; width: 100%; padding: 12px 0;
  background: transparent; color: var(--mtxt); border: 0;
  text-align: left; font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer;
}
#mo-v4 .mo-home-row > b { overflow: hidden; text-overflow: ellipsis; }
#mo-v4 .mo-home-row > :last-child { text-align: right; }
#mo-v4 .mo-home-row + .mo-home-row { border-top: 1px solid var(--mline, #2c394b); }
#mo-v4 .mo-home-row:focus-visible { outline: 2px solid var(--mgreen); outline-offset: 3px; }
#mo-v4 .mo-history-group > summary {
  cursor: pointer; list-style: none; display: grid;
  grid-template-columns: 12px minmax(0, 1fr); column-gap: 6px;
}
#mo-v4 .mo-history-group > summary::-webkit-details-marker { display: none; }
#mo-v4 .mo-history-group > summary::before { content: '▸'; grid-column: 1; grid-row: 1 / 3; align-self: center; }
#mo-v4 .mo-history-group[open] > summary::before { content: '▾'; }
#mo-v4 .mo-history-group > summary > div { grid-column: 2; }
#mo-v4 .mo-timeline { list-style: none; padding: 0 0 0 12px; margin: 16px 0; border-left: 2px solid #304052; }
#mo-v4 .mo-timeline li + li { margin-top: 14px; }
#mo-v4 .mo-timeline p { margin: 4px 0 0; overflow-wrap: anywhere; }
@media (min-width: 760px) {
  html, body { background: #0c1422; }
  body { padding: 0; }
  #mo-v4 { max-width: none; margin: 0; }
  #mo-v4 > .mb-3 { display: none; }
  #mo-v4 .phone {
    width: 100%; max-width: none; height: 100dvh; margin: 0;
    border: 0; border-radius: 0; display: flex; flex-direction: column;
  }
  #mo-v4 .phone > header, #mo-v4 .phone > .nav,
  #mo-v4 .phone > .px-4 { flex-shrink: 0; }
  #mo-v4 .pane { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 32px; }
  #mo-v4 .nav { padding: 8px 24px; }
  #mo-v4 .nav button { flex-direction: row; gap: 10px; font-size: 14px; }
  #mo-v4 .screen[data-screen="login"],
  #mo-v4 #mo-settings-form { max-width: 600px; }
  #mo-v4 .screen[data-screen="login"] { margin: 40px auto; }
  #mo-v4 #mo-plot { width: 100%; height: clamp(300px, 55dvh, 600px); }
  #mo-v4 .screen[data-screen="home"] > .mcard:first-of-type { padding: 24px; }
}